jQuery無縫向上滾動效果
阿新 • • 發佈:2019-02-17
該篇通過js和jquery兩種寫法來實現內容無縫向上滾動的一個效果,廢話不多說,直接上程式碼
(1)向上滾動
HTML:
js程式碼:<div id="demo" style="height:110px;overflow:hidden;"> <div id="demo1"> <ul class="prizelist"> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> <li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li> </ul> </div> <div id="demo2"> <ul class="prizelist"> </ul> </div> </div>
jQuery程式碼:function beginroll() { var speed = 40 window.onload = function() { var demo = document.getElementById("demo"); var demo2 = document.getElementById("demo2"); var demo1 = document.getElementById("demo1"); if(demo1.offsetHeight < 110){ $("#demo2").hide(); demo2.innerHTML = demo1.innerHTML } function Marquee() { if (demo.scrollTop >= demo1.offsetHeight) { demo.scrollTop = 0; } else { demo.scrollTop = demo.scrollTop + 1; } } var MyMar = setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar) } demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) } } } beginroll();
(2)向左滾動$(document).ready(function(){ function beginroll(){ var speed = 40 var demoScrollTop = $("#demo").scrollTop(); var demo1OffsetHeight = $("#demo1").height(); var demohtml= $("#demo1").html(); $("#demo2").html(demohtml); function Marquee() { if (demoScrollTop >= demo1OffsetHeight) { demoScrollTop = 0; } else { demoScrollTop = demoScrollTop + 1; } $("#demo").scrollTop(demoScrollTop); } var MyMar = setInterval(Marquee, speed); $("#demo").mouseover(function(){ clearInterval(MyMar); }) $("#demo").mouseout(function(){ MyMar = setInterval(Marquee, speed); }) } beginroll(); })
HTML:
<div id="demoLeft" style="overflow:hidden;width:80%;margin-left:10%;text-align:center;">
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td id="marquePic1">
<table width='100%' border='0' cellspacing='0'>
<tr>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
<td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td>
</tr>
</table>
</td><td id="marquePic2" ></td>
</tr>
</table>
</div>
JS程式碼: var speed=50;
var demoLeft = document.getElementById("demoLeft");
var marquePic2 = document.getElementById("marquePic2");
var marquePic1 = document.getElementById("marquePic1");
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demoLeft.scrollLeft>=marquePic1.scrollWidth){
demoLeft.scrollLeft=0
}else{
demoLeft.scrollLeft++
}
}
var MyMar1=setInterval(Marquee,speed)
demoLeft.onmouseover=function() {clearInterval(MyMar1)}
demoLeft.onmouseout=function() {MyMar1=setInterval(Marquee,speed)}
總的來說,這個效果運用的是dom元素的scrollTop與offsetHeight兩者之間的聯絡,運用定時器的操作迴圈操作從而實現滾動的效果