正文
JS实现网页飘窗
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.在html中设置一个飘窗的div，div中可以添加图片，添加文字通过css展现在飘窗中；
<!--飘窗-->
<div id="roll">
<img src="img/roll.jpg">
</div>
2.在css中对飘窗设置长宽，用postion进行定位；postion：fixed可以实现绝对定位，使图片始终处于可视窗口内
#roll {
height: 200px;
width: 200px;
position: fixed; /*fixed实现绝对定位*/
cursor:pointer;
}
#roll img{
height: 200px;
width: 200px;}
3.在JS中实现让飘窗实现漂浮的过程：
（1）获取飘窗id；
（2）设置飘窗速度，变化幅度，初始位置；
（3）使用documentElement获取可视化窗口的长宽，用可视化窗口的长宽分别减去飘窗的长宽即可得到飘窗可以移动的范围；
（4）令变化幅度的初始值为1；用statusX ？-1 ：1（statusY ？-1 ：1）来判断飘窗是否到达可视化窗口的左右（上下）边界，用this指针来完成图片每一次移动所改变的位置；
（5）最后用onmouseover和onmouseout来实现鼠标移动到飘窗上停止移动和移开鼠标飘窗继续运动；
4.JS具体实现代码
var ggRoll={ //创建对象直接量
roll:document.getElementById("roll"), //获取id属性为roll的对象
speed:20, //飘动速度，即为定时器函数多长时间执行一次
statusX:1, //规定每执行一次函数，left属性值变化的幅度
statusY:1, //规定每执行一次函数，top属性值变化的幅度
x:100, //规定初始状态下left属性的值
y:300, //规定初始状态下top属性的值
//差值用来测算left属性值的极限
winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth,
//差值用来测算top属性值的极限
winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight,
//声明函数
Go: function () {
//设置div的left属性值
this.roll.style.left = this.x + 'px';
//设置div的top属性值
this.roll.style.top = this.y + 'px';
//如果statusX=1则每次减少1px,否则减少1px
this.x = this.x + (this.statusX ? -1 : 1)
//如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
if (this.x < 0) { this.statusX = 0 }
//如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
if (this.x > this.winW) { this.statusX = 1 } this.y = this.y + (this.statusY ? -1 : 1)
if (this.y < 0) { this.statusY = 0 }
if (this.y > this.winH) { this.statusY = 1 } }
};var interval=setInterval("ggRoll.Go()",ggRoll.speed);
ggRoll.roll.οnmοuseοver=function(){clearInterval(interval)}; //onmouseover属性：鼠标移动到元素上时触发
ggRoll.roll.οnmοuseοut=function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout属性:鼠标离开元素时触发
