谷歌浏览器下还是很正常的啊。。没有卡顿的。
不知道你说的卡顿是不是指在滚动到顶端的时候的跳动。。
确实跳了一下。
如果你的p标签没有重置margin、padding的话,可以这么改
if (demo2.offsetHeight - demo.scrollTop + 16< 0)//当滚动至demo1与demo2交界时demo.scrollTop -= demo1.offsetHeight + 16//demo跳到最顶端
}
16是谷歌浏览器下p标签默认的margin-top的值。
这样就不会有跳动了。
卡顿的问题有两个因素影响了,一个是:向左移动的速度必须为div宽度能整除的数,要不减到最后判断的时候会有余量。二个是:判断的时候已经到了边界了,所以应该执行下一次。修改的例子:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin:0padding:0}
#div2{width:600pxoverflow:hiddenposition:relativeleft:200px}
#div1{position:relativeleft:0pxwidth:1200px}
#div1 li{list-style-type: nonefloat:leftwidth:200pxheight:180px
}
img{width:100%height:100%}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1')
var oDiv=document.getElementById('div1')
var oBtn=document.getElementById('btn1')
var t=0
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML
var speed = 20//速度,必须是oUl.offsetWidth能整除的数;
oBtn.onclick=function(){
clearInterval(t)
t=setInterval(function(){
if(oDiv.offsetLeft <= -oUl.offsetWidth/2){
oDiv.style.left = -speed+'px'//因为判断的时候已经到了边界了,所以应该执行下次
}else{
oDiv.style.left = oDiv.offsetLeft - speed+'px'
}
},50)
}
}
</script>
</head>
<body>
<input id="btn1" value="开始" type="button"/>
<div id="div2">
<div id="div1">
<ul id="ul1">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
这是最古老的js滚动代码了,人家的最初完成dome 是没问题的,估计的看到的是不知道转手多少次的了问题出在这
demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端
在浏览器中 P有默认margin ; 但margin 高度不计算在 offsetHeight
<style>p{ margin:0px}</style>