移动效果(面向滚动条)

最新推荐文章于 2022-08-25 19:16:28 发布

liuhelong

最新推荐文章于 2022-08-25 19:16:28 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

分类专栏：手计文章标签： function div border

本文链接：https://blog.youkuaiyun.com/liuhelong/article/details/2703549

手计专栏收录该内容

31 篇文章

订阅专栏

移动效果以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.onscroll=function(){...}
   2,function window.onscroll(){...}
   3,window.onscroll=函数名称; 注意：只是名称不跟括号的.
   */
   window.onscroll=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>