<!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;
width: 300px;
}
-->
</style>
</head> <body onload="beginmarquee()">
<table width="" border="" cellspacing="" cellpadding="">
<tr>
<td width=""><div id="demo" style="overflow:hidden;width:200px; height:100px">
<div id="demo1">
<img src="1.jpg" width="" height="" />
<img src="2.jpg" width="" height="" />
<img src="3.jpg" width="" height="" />
<img src="4.jpg" width="" height="" />
<img src="5.jpg" width="" height="" />
<img src="6.jpg" width="" height="" />
</div>
<div id="demo2"></div>
</div></td>
<td> </td>
</tr>
</table>
<div id="mydiv1">数据显示</div>
<script language="javascript">
var speed=
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<=)
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 构成了滚动