这篇文章主要为大家展示了“js如何实现右侧悬浮框效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现右侧悬浮框效果”这篇文章吧。具体内容如下让一个div始终悬浮在右下角<!DOC
这篇文章主要为大家展示了“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如何实现右侧悬浮框效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: JS如何实现右侧悬浮框效果
本文链接: https://www.lsjlt.com/news/326071.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0