漂浮广告的原理：用通俗一点的话来说，漂浮广告就是一个在不断改变自身位置的div(当然亦可以是其他)，并且在遇到界面的边界时改变当前运动的方向；
**第一步：**制作一个能够移动的div，并给各项参数赋值
<div id="div1"></div>
var div = document.getElementById("div1");div.style.width = "200px"div.style.height = "200px"div.style.background = "red";// 相对定位div.style.position = "absolute";var offsetx = 0;var offsety = 0;// 初始距离上边界距离div.style.top = offsety;// 初始距离左边界距离div.style.left = offsetx;// X轴移动方向标志位 ，1为从左到右,0为从右到左var flagx = 1;// y轴移动方向标志位 ，1为从上到下,0为从下到上var flagy1 = 1;// 移动步长var step = 20;
**第二步 ：**找到正确的下边界位置，上边界和左边界是div一开始接挨着的，所以我们需要找到下边界和右边界。当div移动到最大能够移动的距离，不就是咱们要找的边界了吗
// 网页可视区域高度var seeHeight = document.documentElement.clientHeight;// 网页可视区域宽度var seeWidth = document.documentElement.clientWidth;// 网页可视区域宽度 - 自身宽度 = 在页面最大可移动宽度var maxLeft = seeWidth - 200;// 网页可视区域宽度 - 自身高度 = 在页面最大可移动高度var maxTop = seeHeight - 200;
**第三步：**开始移动，
// 设置定时器var t = setInterval(move, 30);function move() {// 移动yidong(flagx, flagy);// 当y轴达到下边界时，改变在y轴的移动方向if (offsety >= maxTop) {flagy = 0;}// 当x轴达到下边界时，改变在x轴的移动方向if (offsetx >= maxLeft) {flagx = 0;}// 当y轴达到上边界时，改变在y轴的移动方向if (offsety < 0) {flagy = 1;}// 当x轴达到上边界时，改变在x轴的移动方向if (offsetx < 0) {flagx = 1;}div.style.top = offsety + "px"; // 大于页面的高度 top 小于0div.style.left = offsetx + "px"; // 大于页面总宽度 left 小于 0 }function yidong(x, y) {if (x == 1 && y == 1) {offsetx += step;offsety += step;}if (x == 1 && y == 0) {offsetx += step;offsety -= step;}if (x == 0 && y == 1) {offsetx -= step;offsety += step;}if (x == 0 && y == 0) {offsetx -= step;offsety -= step;}}
**最后一步：**鼠标移入时关闭定时器，移除时再打开定时器
// 鼠标移入时，漂浮广告暂停div.addEventListener("mouseover", function() {clearInterval(t);console.log(111);});// 鼠标移出时，漂浮广告开启div.addEventListener("mouseout", function() {clearInterval(t);t = setInterval(move, 30);});```
