JS漂浮广告代码 浮动广告代码效果实现
这个JavaScript漂浮广告代码是我自己学习的时候写的，不过一次只有漂一个，复制就能用了。也可以根据自已的需要修改成多个飘浮的效果（差不多每一行代码我都注释了，很容易看得懂，写得也比较完善了）。希望站长朋友喜欢。
这个是前端开发的必备的技能，实现思路及方法下面都写得很详细。Js漂浮广告代码比较经典的浮动广告，到现还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #dd{ width: 700px; height: 450px; border: 1px solid blue; background: url(../zb_users/upload/2019/04/201904151555302161716963.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,20); // 给dd加移入事件 onmouseover 用户鼠标移入元素时触发的事件 dd.onmouseover = function(){ // 停止定时器 当鼠标移动到就停止 clearInterval(nn); } // 给dd加移出事件 dd.onmouseout = function(){ // 恢复定时器 这个用全局定时器 nn = setInterval(ww,20); } // 做一个点击关闭 // 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/201904151555302357204596.jpg" alt="" id="tt"/> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知