<
>

JS实现右侧悬浮框效果

2022-04-18 11:12:22 来源：易采站长站 作者：

本文实例为大家分享了js实现右侧悬浮框效果的具体代码，供大家参考，具体内容如下

让一个div始终悬浮在右下角

JS实现右侧悬浮框效果

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title> <style>    #div1{      width: 100px;        height: 150px;        background: red;        position: absolute;        bottom: 0px;        right: 0px;   } </style> <script>   window.onscroll = function(){      var oDiv = document.getElementById('div1');      var scrollTop =document.documentElement.scrollTop||document.body.scrollTop;//浏览器兼容       startmove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop)   // document.docwww.easck.comumentElement.clientHeight 页面可视区高度  }       var timer = null;    //悬浮框缓冲运动  functwww.easck.comion startmove(iTarget){      var oDiv = document.getElementById('div1');      clearInterval(timer);     timer = setInterval(function(){               var speed = (iTarget-oDiv.offsetTop)/4;         speed易采站长站 = speed>0?Math.ceil(speed):Math.floor(speed);         if(oDiv.offsetTop == iTarget){             clearInterval(timer);         }       else{                oDiv.style.top = oDiv.offsetTop +speed+'px';             }        },30)    }              </script></head><body style="height:2000px">   <div id="div1"></div></body></html>

对联悬浮

让div悬浮在右侧中间

JS实现右侧悬浮框效果

只需要更改start move()函数中的数据

startmove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight )/2)+ scrollTop)//对联悬浮

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

暂时禁止评论

最新图文推荐

123

最新专栏文章

大家感兴趣的内容

网友热评的文章

微信扫一扫

易采站长站微信账号