js飘窗

Posted liujiekun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js飘窗相关的知识,希望对你有一定的参考价值。

本次记录一下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)}

 




















































以上是关于js飘窗的主要内容,如果未能解决你的问题,请参考以下文章

息县装修“飘窗的设计”

网页前台页面图片飘窗代码

加个飘窗

CGridCtrl某一列增加ToolTip飘窗效果

产品经理业务流程图的绘制流程分享

cad 做平面图的技巧