js 上下滚动加停顿效果,js 跑马灯加停顿效果
<div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> <li>尾号1183的用户刚刚领取了 78.23元 的现金红包。</li> </ul> <ul id="slide2"></ul> </div>
#middle{ width: 100%; height: 100%; overflow-y: auto; } #middle li { height: 100%; }
var speed = 40; var app = document.getElementById('middle'); var slide1 = document.getElementById('slide1'); var slide2 = document.getElementById('slide2'); slide2.innerHTML = slide1.innerHTML; var timer ,timeout; function marqueeMethods(){ clearTimeout(timeout) if(slide2.offsetTop-app.scrollTop<=0){ app.scrollTop = app.scrollTop - slide1.offsetHeight; }else{ app.scrollTop++; if(app.scrollTop% ($('#slide1 li').eq(0).height()) == 0){ clearTimeout(timeout); clearInterval(timer); timeout = setTimeout(function(){ app.scrollTop++; return timer = setInterval(marqueeMethods,speed); },2000); } } } timer = setInterval(marqueeMethods,speed);
注意 app.scrollTop% ($('#slide1 li').eq(0).height()) == 0
$('#slide1 li').eq(0).height() 这个是获取 走多少距离停的,因为要适配手机直接用jquery 获取的高度,写死的话就不能适配不同屏幕的手机了,
里面还可以自己调节速度,自己去代码吧,一看就知道改那个!