當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

發布時間：2023/12/18 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

boxmove(d1,d2,d3,e,obj)?
d1 = 外圍容器?
d2 = 內容?
d3 = 復制d2的內容接替循環滾動?
e = 方向與方法?
1,2,3,4 = 自動滾動，分別對應：上,右,下,左?
"top","right","bottom","left" = 手動滾動，分別對應：上,右,下,左?
obj = 選擇手動滾動時設置為this，用于事件綁定操作。自動滾動時無須設置。

頁面代碼：?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">?

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">?

<head>?

<title>滾動合集</title>?

// 自動滾動?

function boxmove(d1,d2,d3,e,obj){?

?? ?var speed=30;?

?? ?var demo=document.getElementById(d1); ?

?? ?var demo1=document.getElementById(d2); ?

?? ?var demo2=document.getElementById(d3);?

?? ?demo2.innerHTML=demo1.innerHTML;?

?? ?function boxTop(){?

?? ? ? ? ? ?if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}?

?? ? ? ? ? ?else{demo.scrollTop++}?

?? ? ? ?}?

?? ?function boxRight(){?

?? ? ? ? ? ?if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}?

?? ? ? ? ? ?else{demo.scrollLeft--}?

?? ? ? ?}?

?? ?function boxBottom(){ ?

?? ? ? ? ? ?if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}?

?? ? ? ? ? ?else{demo.scrollTop--}?

?? ? ? ?}?

?? ?function boxLeft(){?

?? ? ? ? ? ?if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}?

?? ? ? ? ? ?else{demo.scrollLeft++}?

?? ? ? ?}?

?? ?if(e==1){?

?? ? ? ? ? ?var MoveTop=setInterval(boxTop,speed);?

?? ? ? ? ? ?demo.οnmοuseοver=function(){clearInterval(MoveTop);}?

?? ? ? ? ? ?demo.οnmοuseοut=function(){MoveTop=setInterval(boxTop,speed)}?

?? ? ? ?}?

?? ?if(e==2){?

?? ? ? ? ? ?var MoveRight=setInterval(boxRight,speed);?

?? ? ? ? ? ?demo.οnmοuseοver=function(){clearInterval(MoveRight)}?

?? ? ? ? ? ?demo.οnmοuseοut=function(){MoveRight=setInterval(boxRight,speed)}?

?? ? ? ?}?

?? ?if(e==3){?

?? ? ? ? ? ?var MoveBottom=setInterval(boxBottom,speed);?

?? ? ? ? ? ?demo.οnmοuseοver=function(){clearInterval(MoveBottom);}?

?? ? ? ? ? ?demo.οnmοuseοut=function(){MoveBottom=setInterval(boxBottom,speed)}?

?? ? ? ?}?

?? ?if(e==4){?

?? ? ? ? ? ?var MoveLeft=setInterval(boxLeft,speed)?

?? ? ? ? ? ?demo.οnmοuseοver=function(){clearInterval(MoveLeft)}?

?? ? ? ? ? ?demo.οnmοuseοut=function(){MoveLeft=setInterval(boxLeft,speed)}?

?? ? ? ?}?

?? ?if(e=="top"){?

?? ? ? ? ? ?MoveTop=setInterval(boxTop,speed)?

?? ? ? ? ? ?obj.οnmοuseοut=function(){clearInterval(MoveTop);}?

?? ? ? ?}?

?? ?if(e=="right"){?

?? ? ? ? ? ?MoveRight=setInterval(boxRight,speed)?

?? ? ? ? ? ?obj.οnmοuseοut=function(){clearInterval(MoveRight);}?

?? ? ? ?}?

?? ?if(e=="bottom"){?

?? ? ? ? ? ?MoveBottom=setInterval(boxBottom,speed)?

?? ? ? ? ? ?obj.οnmοuseοut=function(){clearInterval(MoveBottom);}?

?? ? ? ?}?

?? ?if(e=="left"){?

?? ? ? ? ? ?MoveLeft=setInterval(boxLeft,speed)?

?? ? ? ? ? ?obj.οnmοuseοut=function(){clearInterval(MoveLeft);}?

?? ? ? ?}?

?? ?} ? ??

</script>?

div#a,div#b,div#c,div#d { float:left;}?

h2 { clear:both; }?

div#b,div#d,div#bb { white-space:nowrap; }?

</style>?

</head>?

<body>?

<h1>滾動合集</h1>?

<hr />?

<h2>向上</h2>?

<div id="a" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="a1"> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="a2"></div>?

</div> ?

boxmove("a","a1","a2",1);?

</script>?

<h2>向右</h2>?

<div id="b" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="b1">?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="b2"></div>?

</div> ?

boxmove("b","b1","b2",2);?

</script>?

<h2>向下</h2>?

<div id="c" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="c1"> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="c2"></div>?

</div> ?

boxmove("c","c1","c2",3);?

</script>?

<h2>向左</h2>?

<div id="d" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="d1"> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="d2"></div>?

</div> ?

boxmove("d","d1","d2",4);?

</script>?

<h2>手動滾動 - <strong οnmοuseοver="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong οnmοuseοver="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>?

<div id="aa" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="aa1"> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="aa2"></div>?

</div> ?

<h2>手動滾動 - <strong οnmοuseοver="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong οnmοuseοver="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>?

<div id="bb" style="overflow:hidden;height:100px;width:90px;"> ?

<div id="bb1"> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ?

<img src="http://www.jb51.net/images/logo.gif" alt="" /> ??

</div> ?

<div id="bb2"></div>?

</div>?

</body>?

</html>?

轉載于:https://www.cnblogs.com/top5/archive/2010/11/30/1891905.html

總結

以上是生活随笔為你收集整理的javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：去除List集合中的重复值（四种好用的方
下一篇： SpringMVC请求处理流程、spri