这篇文章主要为大家展示了“JS如何实现右侧悬浮框效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现右侧悬浮框效果”这篇文章吧。
具体内容如下
让一个div始终悬浮在右下角
<!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.documentElement.clientHeight 页面可视区高度 } var timer = null; //悬浮框缓冲运动 function 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 > <div id="div1"></div></body></html>对联悬浮
让div悬浮在右侧中间
只需要更改start move()函数中的数据
startmove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight )/2)+ scrollTop)//对联悬浮以上是“JS如何实现右侧悬浮框效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
