js飘窗

Posted 2020-10-31 liujiekun

本次记录一下js实现飘窗代码遇到的问题，主要是将飘窗始终保持在可视区域内，实现ie低版本的兼容。

首先是实现飘窗问题，代码网上一查一大堆很容易实现飘窗，如我在网上找的一个例子：

var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("specialdiv")
var userAgent=navigator.userAgent;
function floatwww_qpsh_com() {
var L=T=0

var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
T=document.documentElement.scrollTop;
obj.style.left = x + document.body.scrollLeft+"px"
obj.style.top = y + document.body.scrollTop+"px"
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatwww_qpsh_com()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}

但是实现之后发现有些不符合我自己的预期，主要是body被内容填充的太长，一屏根本放不下，导致飘窗直接飘出视野了，知道碰到最底层的线才会往上走，查看代码，无非往下走什么时候返回是B的问题，往上走什么时候返回是T的问题，每次计算只要将B、T的值计算正确，飘窗就能按我们的意愿走，网上查了一下window.innerHeight是获取屏幕可视区域的高度，这个高度是可变的，比如你打开F12之后，它只显示内容区域的高度，scoll之后隐藏的区域不算，那如果下拉条下拉了一段距离，距离就应该是window.innerHeight+document.documentElement.scrollTop，使用document.documentElement.scrollTop是因为document.body.scrollTop的值始终为0，因为它的确从始至终没有发生scroll，因此设置B的值可以为：window.innerHeight+document.documentElement.scrollTop-obj.offsetHeight;，但ie的低版本浏览器不识别window.innerHeight，所以必须替换为：document.documentElement.clientHeight，因此设置B的值应该根据浏览器差异分别设置。

然后就是飘窗网上走的时候，什么时候往下返回，主要是设置T的值，幸运的是ie低版本也可以识别document.documentElement.scrollTop，所以直接将T=document.documentElement.scrollTop;

最终代码为：

var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("你自己的ID")
var userAgent=navigator.userAgent;
function floatwww_qpsh_com() {
var L=T=0

var R= document.body.clientWidth-obj.offsetWidth
var B;
//var B = document.body.clientHeight-obj.offsetHeight
if(userAgent.indexOf("Chrome") > -1)
{
B= window.innerHeight+document.documentElement.scrollTop-obj.offsetHeight;
}
else
{
B=document.documentElement.clientHeight+document.documentElement.scrollTop-obj.offsetHeight;
}
T=document.documentElement.scrollTop;
obj.style.left = x + document.body.scrollLeft+"px"
obj.style.top = y + document.body.scrollTop+"px"
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatwww_qpsh_com()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}