今天有个分公司设计师投诉,问题是他在网上找到的js无缝滚动插入页面后,ff只滚动一次就停止了!
开始以为是公司自有产品的js冲突引起的,但是如果将代码插入到页面上方,问题就解决了;插入到页面中部问题就复现了。
经过与代码的激烈拉锯战,最后发现,原来造成这个问题的原因竟然是js里面用到的一个属性值:offsetTop!
代码先上:
<div id="demo" onmouseout="inter=setInterval(qswhMarquee,30)" onmouseover="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
- 大小: 18.1 KB
分享到:
相关推荐
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的...
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动——上下的效果。其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且...
绝对好用 部分代码如下: <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-
Js中 关于top、clientTop、scrollTop、offsetTop等
在基于javascript的无缝滚动动画实现1最后一个运行框,我已经做了这样的探索。不过换汤不换药,还是来来回回在scrollTop/scrollLeft与offsetTop/offsetLeft上做文章。总的思路基本是这样,让某个元素整体向某个方向...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS...
因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶、锚点和滚动高亮按钮的效果。 需求 滚动页面到顶部,...
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj....
Js中_关于top、clientTop、scrollTop、offsetTop.doc
如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop,只读 一个元素顶部边框的宽度(以像素表示)。嗯。。就只是border-top-...
Js中关于top、clientTop、scrollTop、offsetTop.pdf
一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用。...
本文实例讲述了jQuery实现的监听导航滚动置顶状态功能。分享给大家供大家参考,具体如下: 1. js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //...
前端开发中,经常用到滚动到一定高度后,固定显示需求
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器...
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解,
图片减速度滚动(by rentj1@163.com;)</title> <style> ul{ margin:0; padding:0} ul{ list-style:none;} body{font:12px/1.2 “宋体”; } .scroll_box{ position:relative; height:164px; width:766px; ...
很好很好好、很好很好好、很好很好好、很好很好好、
博客目录的一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不...