移动效果以DIV为例（面向滚动条）
例:
<html>
<head>
<title>DIV的移动效果</title>
<script type="text/javascript">
function xx()
{
var xDiv=document.getElementById("div1");
// 从函数中取得滚动条位置信息
var arr=getScroll();
xDiv.style.position="absolute"; //移动效果的必选项
xDiv.style.top=arr[0]+50;
// 显示出当前滚动条的各边的位置
var top=arr[0];
var left=arr[1];
var right=arr[1]+arr[2];
var bottom=arr[0]+arr[3];
xDiv.innerHTML=top+"<br />"+left+", "+right+"<br />"+bottom;
}
function getScroll()
{
var array=new Array();
if (document.documentElement && document.documentElement.scrollTop)
{
array[0] = document.documentElement.scrollTop;
array[1] = document.documentElement.scrollLeft;
array[2] = document.documentElement.scrollWidth;
array[3] = document.documentElement.scrollHeight;
}
else if (document.body)
{
array[0] = document.body.scrollTop;
array[1] = document.body.scrollLeft;
array[2] = document.body.scrollWidth;
array[3] = document.body.scrollHeight;
}
return array;
}
/* window.onscroll是滚动条的change事件
该事件有多种写法：
1,window.οnscrοll=function(){...}
2,function window.onscroll(){...}
3,window.οnscrοll=函数名称; 注意：只是名称不跟括号的.
*/
window.οnscrοll=xx;
</script>
</head>
<body>
<div style="width:200px; height:3000px; border:solid 1px red; margin-left:20px;">
<div id="div1" style="width:198px; height:200px; background-color:#ac2e9d;"></div>
</div>
<body>
</html> |
|
转播
