首页 新闻 搜索 专区 学院

scrollTop和offsetTop的区别

0
悬赏园豆:30 [已解决问题] 解决于 2012-12-07 10:47
/**
这个是我转司徒正美的一个图片上下无缝滚动的效果
**/
<style type="text/css"> #marquee { position: relative; height: 300px; width: 200px; overflow: hidden; border: 10px solid #369; padding:0; margin:0; } #marquee img { display: block; } #marquee dd { margin: 0px; padding: 0px; } </style> <dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="无缝滚动" /> </dt> <dd> </dd> </dl> <script type="text/javascript"> var Marquee = function (id) { var container = document.getElementById(id), original = container.getElementsByTagName("dt")[0], clone = container.getElementsByTagName("dd")[0], speed = arguments[1] || 10; clone.innerHTML = original.innerHTML; alert(container.scrollTop); var rolling = function () { if (container.scrollTop == clone.offsetTop) {//我现在纠结的就是container.scrollTop和clone.offsetTop的区别
为什么clone.offsetTop是1050,而外面的container.scrollTop却是0
container.scrollTop
= 0; } else { container.scrollTop++; } } var timer = setInterval(rolling, speed) container.onmouseover = function () { clearInterval(timer) } container.onmouseout = function () { timer = setInterval(rolling, speed) } } window.onload = function () { Marquee("marquee"); } </script>
严文Live2012的主页 严文Live2012 | 初学一级 | 园豆:36
提问于:2012-12-06 17:06
< >
分享
最佳答案
0

1、scrollTop:https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

比较容易理解,一个可读写的属性

1)element.scrollTop 返回该元素当前垂直滚动的距离,比如100(无单位)

2)element.scrollTop = 100 将该元素垂直滚动的距离设置为100,注意100为绝对值,而不是相对值。比如当前元素垂直滚动距离 element.scrollTop = 200,则设置完后,该元素垂直滚动的距离为100,而不是100+200

 

2、offsetTop:https://developer.mozilla.org/en-US/docs/DOM/element.offsetTop

返回该元素相对于其offsetParent顶部的距离,至于offsetParent,指的是距离该元素最近的定位元素,如下所示

<div id="p"><a> <span id="c"></span> </a></div>, P为C的offsetParent,offsetTop则为C距离P顶部的距离

收获园豆:30
程序猿小卡 | 菜鸟二级 |园豆:386 | 2012-12-06 18:52
其他回答(1)
0

http://blog.csdn.net/wgw335363240/article/details/5580654

chenping2008 | 园豆:9836 (大侠五级) | 2012-12-06 17:10

这个我看了,但测试起来还是很抽象,有没有具体点的

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-06 17:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册