JS漂浮广告完善效果
1、直接代码演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #dd{ width: 540px; height: 280px; border: 1px solid blue; background: url(../zb_users/upload/2019/03/201903251553520348126785.jpg) no-repeat; position: absolute; left: 0; top: 0; } </style> <script type="text/javascript"> window.onload = function(){ var dd = document.getElementById('dd'); var tt = document.getElementById('tt'); // clientHeight 获得可视区域的宽高 var ks1 = document.documentElement.clientHeight; // 获得可视区域的宽度 var ks2 = document.documentElement.clientWidth; // 计算可以达到的最大的top和left值 // 可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度) var jd = ks1 - dd.offsetHeight; // 可视性的宽度减去这个元素本身的宽度（就是从左到右的宽度） var kd = ks2- dd.offsetWidth; // ## 假如x=1或y=1; 1调成5就不能正常显示,因为假如比如高度是309,你一次加5就不能正好到309下面再做判断就不成立了,就控制不住了。所以要在将新值赋值回去之前先做一个判断 // var x=1,y=1; var x=5,y=5; // 定时器调用的函数开始 为了方便调用，先把定时器独立出来 // 先给取个名字叫ww function ww(){ // 获得旧的left和top值 offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果 var kk = dd.offsetLeft; var ww = dd.offsetTop; // 计算新的left和top值 // var kkt = kk+1; // 把1改成x可变量 在抓元素上面写 x=1 ,y=1 var kkt = kk+x; // var wwt = ww+1; var wwt = ww+y; // ## 在这里先做一个判断 // 假如新的值大过可视最大值 ,那么最新的值就等于最大的值 if (wwt>jd) { wwt=jd; } if (kkt>kd) { kkt=kd; } // 判断最大的还要判断最小的才行,要不然小的时候控制不住变负数了 if (wwt<0) { wwt=0; } if (kkt<0) { kkt=0; } // 将新值赋值回去 dd.style.left = kkt+'px'; dd.style.top = wwt+'px'; if (wwt==jd) { // 从上到下到底后减top值 y=-5; } // wwt==0到顶后又加1,把top变大 if (wwt==0) { y=5; } // left走到最大最右后减1 if (kkt==kd) { x=-5; } // left走回到最小最左后加1 if (kkt==0) { x=5; } } // 定时器调用的函数结束 // 调用定时器 这个可以用局部var var nn = setInterval(ww,10); // 设置定时器,每隔一段时间就改变一下left和top // nn = setInterval(function(){ //// 获得旧的left和top值 offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果 // var kk = dd.offsetLeft; // var ww = dd.offsetTop; // //// 计算新的left和top值 //// var kkt = kk+1; //// 把1改成x可变量 在抓元素上面写 x=1 ,y=1 // var kkt = kk+x; //// var wwt = ww+1; // var wwt = ww+y; //// 将新值赋值回去 // dd.style.left = kkt+'px'; // dd.style.top = wwt+'px'; // if (wwt==jd) { //// 从上到下到底后减top值 // y=-1; // } //// wwt==0到顶后又加1,把top变大 // if (wwt==0) { // y=1; // } //// left走到最大最右后减1 // if (kkt==kd) { // x=-1; // } //// left走回到最小最左后加1 // if (kkt==0) { // x=1; // } // },10) // 定时器结束 // 给dd加移入事件 onmouseover 用户鼠标移入元素时触发的事件 dd.onmouseover = function(){ // 停止定时器 当鼠标移动到就停止 clearInterval(nn); } // 给dd加移出事件 dd.onmouseout = function(){ // 恢复定时器 这个用全局定时器 nn = setInterval(ww,10); } // 做一个点击关闭 // tt的单击事件 tt.onclick = function(){ // 让广告隐藏 在抓元素那里先抓tt这个元素要不然关不掉 dd.style.display = 'none'; } // 浏览器窗口改变事件 onresize 事件会在窗口或框架被调整大小时发生 window.onresize = function(){ // 让广告归位 dd.style.left = 0; dd.style.top = 0; // 归位变0后，怕它-5成负数飘走 到0后加 为了严谨的写法 x=5,y=5; // 我们的窗口发生改变了,当然也要从新获得一下可视大小值重新计算可以到达最大的left和top值 // clientHeight 获得可视区域的宽高 var ks1 = document.documentElement.clientHeight; // 获得可视区域的宽度 var ks2 = document.documentElement.clientWidth; // 计算可以达到的最大的top和left值 // 可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度) // 上面要加到这个局部变量改一下var,设成全局变量要不然只能作用在这里上面抓不到 jd = ks1 - dd.offsetHeight; // 可视性的宽度减去这个元素本身的宽度（就是从左到右的宽度） kd = ks2- dd.offsetWidth; } } </script> </head> <body> <div id="dd"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903251553520411176789.jpg" alt="" id="tt"/> </div> </body> </html> 上面代码效果图：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知