<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 飘窗</title>
</head>
<style>
#roll {
192px;
padding: 5px;
border-radius: 5px;
cursor: pointer;
color: white;
/* 渐变 */
background-image: linear-gradient(135deg, red, yellow);
/* 阴影 */
box-shadow: 5px 5px 5px #888888;
/* 绝对定位 */
position: fixed;
}
#roll p {
margin: 0px;
}
#roll a {
color: white;
text-decoration: none;
}
#roll .close-btn {
text-align: right;
}
</style>
<body>
<!--飘窗-->
<div id="roll">
<p id="link">
飘窗内容
</p>
<p class="close-btn">
<span id="close">关闭</span>
</p>
</div>
<script>
// 创建对象直接量
var rolls = {
// 获取id属性为roll的对象
link: document.getElementById("link"),
// 获取id属性为roll的对象
close: document.getElementById("close"),
// 获取id属性为roll的对象
roll: document.getElementById("roll"),
// 初始状态下left属性的值
x: 100,
// 初始状态下top属性的值
y: 300,
// left变化幅度
statusX: 1,
// top变化幅度
statusY: 1,
// 定时器执行间隔时间
speed: 20,
// 差值用来测算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("rolls.Go()", rolls.speed);
// onmouseenter属性：鼠标移动到元素上时触发
rolls.roll.onmouseenter = function () {
console.log(1);
clearInterval(interval)
};
// onmouseleave属性:鼠标离开元素时触发
rolls.roll.onmouseleave = function () {
console.log(2);
interval = setInterval("rolls.Go()", rolls.speed)
};
// 飘窗点击事件
rolls.link.onclick = function () {
window.open("https://www.baidu.com/");
}
// 关闭飘窗
rolls.close.onclick = function () {
// 隐藏或直接移除dom元素
rolls.roll.style.display = "none";
// document.body.removeChild(document.getElementById("roll"));
}
</script>
</body>
</html>