JavaScript实现右侧悬浮框

最新推荐文章于 2024-02-01 11:15:00 发布

Hellowongwong

最新推荐文章于 2024-02-01 11:15:00 发布

阅读量223

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mc67/p/5171109.html

版权

JavaScript实现右侧悬浮框

HTML代码：

<body>
  <div id="div1">
  </div>
</body>

css代码：

#div1{
    height:150px;
    width:100px;
    background:red;    
    position:absolute;
    right:0px;
    bottom:0px;
}
body{
    height:2000px;
}

javascript代码

  //当窗体滚动的时候滴呀
  window.οnscrοll=function (){
      var obj=document.getElementById("div1");
      //考虑到浏览器的兼容性滴呀(被卷去的高度)
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //浏览器可视区域的高度+物体自身的高度+被卷曲的高度
     // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //move(targetLen);
    //这样我们就完成了基本的人物我滴
    //方式二：结果他是要抖动滴呀
    //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //move(targetLen);
    var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    move(targetLen);
    //这样我们的基本功能算是实现了滴呀
  }
  //这里我们俩加上一个缓冲运动滴呀，这样才方便我们去这些事情滴呀
  var Timer=null;
  function move(iTarget){
      clearInterval(Timer);//先清除
      var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //距离上面物体的距离滴呀
           var speed=(iTarget-obj.offsetTop)/4;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           //先获取我们的速度滴呀
           if(obj.offsetTop==iTarget){
               clearInterval(timer); //到达目的之后，我们就清除元素滴呀
           }else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //来进行我们饿缓冲运动滴呀
  }

未完待续;

转载于:https://www.cnblogs.com/mc67/p/5171109.html

Hellowongwong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现右侧悬浮框

JavaScript实现右侧悬浮框HTML代码：<body> <div id="div1"> </div></body>css代码：#div1{ height:150px; width:100px; background:red; position:absol...
复制链接

扫一扫