JS运动之实现页面侧边的居中浮动框

最新推荐文章于 2019-06-08 18:27:52 发布

曲奇小姐

最新推荐文章于 2019-06-08 18:27:52 发布

阅读量660

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80685875

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实现右侧的浮动栏</title>
    <style>
    #div1{
      width: 80px;
      height: 150px;
      position: absolute;
      right:0px;
      bottom: 0px;
      background: pink;
    }
    </style>
    <script type="text/javascript">
     window.οnscrοll=function(){  //onscroll事件在元素滚动时触发
       var oDiv=document.getElementById('div1');
       // documentElement.scrollTop 和document.body.scrollTop都是获得当前页面滚动条纵坐标的位置，为了浏览器兼容所以取或值
       var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

      //在JS运动这一块经常要把目标值取整，因为浏览器对位置的最低识别粒度是1px
      //document.documentElement.clientHeight:可见区域的高度
       startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
    }
    var timer=null;
    function startMove(iTarget){
      var oDiv=document.getElementById('div1');

      clearInterval(timer);
      timer=setInterval(function(){
        var speed=(iTarget-oDiv.offsetTop)/6;
        if(speed>0){
          speed=Math.ceil(speed);
        }
        else{
          speed=Math.floor(speed);
        }

        if(oDiv.offsetTop==iTarget){
          clearInterval(timer);
        }
        else{
          oDiv.style.top=oDiv.offsetTop+speed+'px';
        }
      },30)
    }
    </script>
  </head>
  <!-- 这里给body加一个高，目的是把滚动条撑出来 -->
  <body style="height:2000px;">
    <div id='div1'></div>
  </body>
</html>

曲奇小姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS运动之实现页面侧边的居中浮动框

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;实现右侧的浮动栏&lt;/title&gt; &lt;style&gt; #div1
复制链接

扫一扫