JS右侧悬浮框
大橙子啊啊啊啊 人气:0让一个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 style="height:2000px"> <div id="div1"></div> </body> </html>
对联悬浮
让div悬浮在右侧中间
只需要更改start move()函数中的数据
startmove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight )/2)+ scrollTop)//对联悬浮
加载全部内容