<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- #mydiv1 { height: 30px; 300px; } --> </style> </head> <body onload="beginmarquee()"> <table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"><div id="demo" style="overflow:hidden;200px; height:100px"> <div id="demo1"> <img src="1.jpg" width="200" height="200" /> <img src="2.jpg" width="200" height="200" /> <img src="3.jpg" width="200" height="200" /> <img src="4.jpg" width="200" height="200" /> <img src="5.jpg" width="200" height="200" /> <img src="6.jpg" width="200" height="200" /> </div> <div id="demo2"></div> </div></td> <td> </td> </tr> </table> <div id="mydiv1">数据显示</div> <script language="javascript"> var speed=12 demo2.innerHTML=demo1.innerHTML mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'demo1的scrollTop'+demo1.scrollTop+'demo2的scrollTop'+demo2.scrollTop function Marquee() { if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else { demo.scrollTop++ } mydiv1.innerHTML='demo的scrollTop'+demo.scrollTop+'<br>demo1的scrollTop'+demo1.scrollTop+'<br>demo2的scrollTop'+demo2.scrollTop+'<br><br>demo的offsetTop'+demo.offsetTop+'<br>demo1的offsetTop'+demo1.offsetTop+'<br>demo2的offsetTop'+demo2.offsetTop+'<br><br>demo的offsetHeight'+demo.offsetHeight+'<br>demo1的offsetHeight'+demo1.offsetHeight+'<br>demo2的offsetHeight'+demo2.offsetHeight } var MyMar function beginmarquee() { MyMar=setInterval(Marquee,speed) } demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </script> </body> </html>
demo的scrollTop从0到1200变化
demo1的scrollTop0
demo2的scrollTop0
demo的offsetTop0
demo1的offsetTop0
demo2的offsetTop1200
demo的offsetHeight100
demo1的offsetHeight1200
demo2的offsetHeight1200
scrollTop相当于只对含有嵌套的子元素，带overflow的滚动条的对象有效，是父级的一个属性。只的是子对象溢出父对象上边界的距离。（不用从滚动条理解，从子对象对父对象位置更准确）
offsetTop 这个比较难理解，是对于子对象的概念，如果按字面上理解 指 obj 距离上方或上层控件的位置 这个不是特别准确，因为在幻灯滚动过程中，其实 offsetTop是没有变的。不如说初始时，该对象距离整体的顶端的距离。或者说子对象距离子对象空间整体的顶端的距离。
offsetHeight就是实际的高度
demo.scrollTop++ 和overflow:hidden 构成了滚动