今天有个分公司设计师投诉,问题是他在网上找到的js无缝滚动插入页面后,ff只滚动一次就停止了!
开始以为是公司自有产品的js冲突引起的,但是如果将代码插入到页面上方,问题就解决了;插入到页面中部问题就复现了。
经过与代码的激烈拉锯战,最后发现,原来造成这个问题的原因竟然是js里面用到的一个属性值:offsetTop!
代码先上:
<div id="demo" οnmοuseοut="inter=setInterval(qswhMarquee,30)" οnmοuseοver="clearInterval(inter)" style="height: 219px; overflow: hidden;">
<!--此处为滚动原始内容开始-->
<div id="demo1">
<p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
</div>
<!--此处为滚动原始内容结束-->
<!--此处为复制内容开始-->
<div id="demo2">
</div>
<!--此处为复制内容结束-->
</div>
<script>
var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");
var inter;
t2.innerHTML=t1.innerHTML;
function qswhMarquee(){
if(t2.offsetTop<=t.scrollTop)
t.scrollTop-=t1.offsetHeight;
else
t.scrollTop++;
}
inter=setInterval(qswhMarquee,30);
function getid(id){
return document.getElementById(id);
}
</script>
以下为个人理解,如有高手发现有误,请不吝赐教,板儿砖拍轻点儿哟!呵呵呵
offsetTop
1、当元素的父容器没有指定定位方式时,指元素与body元素之间的偏移距离;
2、当对父容器指定定位方式(如:position:relative;)时,则指元素与父容器之间的偏移距离;
所以,当没有指定定位方式时,代码中的t2.offsetTop值已经是元素demo2与body元素之间的偏移距离了。当这部分代码置入页面上方top:0处时,自然没有问题。但是,如果插入到页面下方时,t2.offsetTop值就已经不再是top:0了,自然就出现位移偏差了,以致滚动执行不正确!
网上找了张图,很清晰地指出了元素的类似属性值与区别。提供给大家共勉!哈哈哈
http://hi.baidu.com/kiky_zhang/blog/item/abe314de935e504acdbf1abd.html