.
.
.
.
<!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=gb2312" />
<title>无标题文档</title>
<script>
var initTop;
function init(){
initTop = parseInt(Layer1.style.top);
}
function move(){
Layer1.style.top =initTop + document.documentElement.scrollTop + "px";
}
function hiddendiv(){
Layer1.style.display="none";
}
window.onscroll=move;
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 36px}
-->
</style>
</head>
<body onLoad="init()">
<div id="Layer1" style="position:absolute; left:31px; top:43px; 470px; height:377px; z-index:1; background-color: #E10708; layer-background-color: #E10708; border: 1px none #000000; background-image: url(1.jpg); layer-background-image: url(1.jpg);"><a href="javascript:hiddendiv()" class="STYLE1">关闭</a></div>
<p>Div对象的重要属性。</p>
<p>Div的移动：：通过设置样式属性的top和left实现。</p>
<p>步骤：</p>
<p>1、画div将内嵌样式改成行内样式 。内嵌样式的top不能取到值。</p>
<p>两个重要样式属性：</p>
<p>index设置层的z轴座标 </p>
<p>position:absolute;position设置定位方式。absolute是绝对定位方式。</p>
<p>只有使用absolute层才能浮于文字上方。</p>
<p>2、想动就要改变top和left</p>
<p>
<input type="button" name="Submit" value="向下移动20px" onclick="move()"/>
</p>
<p>3、找到一个合适的事件。滚动条的事件。window.<a href="../events/onscroll.html">onscroll</a>事件。但是没有一个html标签表示window对象。</p>
<p>4、改变方式的事件注册。在javascript中给window.onscroll事件注册函数。</p>
<p><script></p>
<p>window.onscroll=函数名;//不要（）</p>
<p></script></p>
<p>5、函数中设置top=top的初始值+滚值</p>
<p>滚值:document.body.scrollTop;但这个不符全w3c的规范.所以要把每行的w3c删除才能用。</p>
<p>document.<A href="../properties/documentElement.html">documentElement</A>.scrollTop这个符合w3c的规范了。可以不用删除。</p>
<p><img src="taobao-con.jpg" width="956" height="533" /><img src="taobao-con.jpg" width="956" height="533" /><img src="taobao-con.jpg" width="956" height="533" /><img src="taobao-con.jpg" width="956" height="533" /> </p>
</body>
</html>