當前位置:首頁 » 網頁前端 » 前端怎麼實現內容隨滾動距離變化
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端怎麼實現內容隨滾動距離變化

發布時間: 2022-12-11 10:52:14

Ⅰ 怎樣實現網頁中div可隨滑鼠滾動一定距離然後固定

1、頭部定義一個div,固定高度,設置絕對定位(position:absolute),設置上邊距(top:0);
2、底部定義一個div,固定高度,設置絕對定位(position:absolute),設置下邊距(bottom:0);
3、中間定義一個div,設置滾動條自動( overflow: auto); 設置絕對定位(position:absolute),設置top和bottom,top的值等於頭部div的高度,bottom的值等於底部div的高度

Ⅱ web前端開發:如何讓網頁隨滾動條下拉自動延伸。

可以利用滾動刷新,調用ajax實現,推薦使用jquery滾動刷新的插件,網上有許多,水平參差不齊。
樓主可以根據需要自己搜一下,至於使用方法。給你一篇文章,以作參考,至於能否管用。樓主需要自己揣摩下啦
http://www.zhangxinxu.com/wordpress/2010/11/jquery%E9%A1%B5%E9%9D%A2%E5%9B%BE%E7%89%87%E7%AD%89%E5%85%83%E7%B4%A0%E6%BB%9A%E5%8A%A8%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%AE%9E%E7%8E%B0/

Ⅲ html中如何製作隨著屏幕滾動的文字(就是會跟著屏幕走的文字)

圖片滾動代碼 (從右向左滾動)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滾動的圖片地址1">

<img border="0" src=" http://要滾動的圖片地址2">

</marquee>

圖片滾動代碼 (從下往上滾動)

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滾動的圖片地址1">

<img border="0" src=" http://要滾動的圖片地址2"> <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>
把圖片的連接地址寫在這里
</marquee>
1.direction屬性:決定文本的滾動方向,分為向左left和向右right,up和down默認狀態向左。
<marquee direction=left>從右向左滾動</marquee>
<marquee direction=right>從左向右滾動</marquee>
2.behavior屬性:指定文本的滾動方式,分為三種:
Scroll:從一端消失後,在另一端出現並繼續滾動。
<marquee behavior=scroll>一圈一圈地滾動</marquee>
Slide:從一端滾動,接觸到另一端後停止
<marquee behaviro=slide>只滾動一次就停止</marquee>
Alternate:從一端滾動到另一端後,反向滾動。
<marquee behavior=alternate>來回滾動</marquee>
direction=up(left、right、down) 這個屬性可以更改,這樣就可以實現上下左右了 但是.我建議用一種無縫的文字滾動.這樣的效果會比較好看.而用marquee就沒那麼好了方法代碼 先介紹一下它的實現思路:一個設定寬度並且隱藏超出它寬度的內容的容器demo,裡面放demo1和demo2,demo1是滾動內容,demo2為demo1的直接克隆,通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的,當滾動至demo1與demo2的交界處時直接跳回初始位置,因為demo1與demo2一樣,所以分不出跳動的瞬間,從而達到「無縫」滾動的目的。

先了解一下對象的幾個的屬性:
innerHTML:設置或獲取位於對象起始和結束標簽內的 HTML
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetWidth:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度

向上滾動的代碼:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//滑鼠移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑鼠移開時重設定時器
</script>

向下滾動:
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左滾動:
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右滾動:
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

Ⅳ jsp頁面中數據隨屏幕滾動載入如何實現

你這個要求,跟jsp基本無關了,就是前台展現的方式,ajax獲取json格式的數據後,將數據放在一個數組中,每次取10條(多少自己定),取完之後在頁面顯示,同時從數組中刪除,這樣就不會重復載入了。
前台寫一個js方法,判斷當前頁面高度、屏幕高度、滑鼠滾輪位置,根據這三個值來判斷是否需要載入下一頁數據。

以下代碼使用jQuery

var pageH = $(document.body).height();
var scrollT = $(window).scrollTop();
var winH = $(window).height();

var rat = (pageH - winH - scrollT)/winH

當rat小於一個值時(自己定,可以設置成0.01或者0.02),則載入下一頁數據。或者顯示一個「載入下一頁」的按鈕,點擊後載入下一頁的數據,當判斷所有數據都載入完畢後,重新到後台獲取新的數據。