<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="float.js"></script>网页代码:
<div class="float-container" id="ad1" style="position: absolute; left: 379px; top: 108px;"> <a href="#" title="" target="_blank"> <img src="gif.gif" alt=""> </a> <p class="ad1-close">关闭</p> </div> <style> .float-container { position: relative; z-index:99999999999999999999; } .float-container p { text-align: right; position: absolute; margin: 0; top: -25px; right: 0; cursor: pointer; } </style> <script> $(function () { var ad1 = new AdMove("ad1", true); ad1.Run(); $('.ad1-close').on('click', function () { $(this).parent().remove() }); }) </script>
Js代码:
function addEvent(obj, evtType, func, cap) {//obj:dom操作对象,evtType:对象绑定的事件,func:触发的函数 cap = cap || false; if (obj.addEventListener) { obj.addEventListener(evtType, func, cap); return true; } else if (obj.attachEvent) { if (cap) { obj.setCapture(); return true; } else { return obj.attachEvent("on" + evtType, func); } } else { return false; } } function getPageScroll() {//获取滚动条滚动的距离(分别使用不同的浏览器) var xScroll, yScroll; if (self.pageXOffset) {//获取页面相对于窗口显示区左上角的 X 位置 xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollLeft) { xScroll = document.documentElement.scrollLeft;//获取页面的水平滚动条的位置 } else if (document.body) { xScroll = document.body.scrollLeft;//获取页面的水平滚动条的位置 } if (self.pageYOffset) {//获取页面相对于窗口显示区左上角的 Y 位置。 yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { yScroll = document.documentElement.scrollTop;//获取页面垂直方向滚动的值 } else if (document.body) { yScroll = document.body.scrollTop; } arrayPageScroll = new Array(xScroll, yScroll); return arrayPageScroll;//返回当前页面滚动条距离左边和上边的距离 } function GetPageSize() {//获取页面位置以及窗口大小 var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth;//网页正文全文宽 yScroll = window.innerHeight + window.scrollMaxY;// } else if (document.body.scrollHeight > document.body.offsetHeight) { xScroll = document.body.scrollWidth;//获取浏览器页面可见的区域宽度 yScroll = document.body.scrollHeight; } else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight) return arrayPageSize; } //广告脚本文件 AdMove.js var AdMoveConfig = new Object(); AdMoveConfig.IsInitialized = false; AdMoveConfig.ScrollX = 0; AdMoveConfig.ScrollY = 0; AdMoveConfig.MoveWidth = 0; AdMoveConfig.MoveHeight = 0; AdMoveConfig.Resize = function () { var winsize = GetPageSize();//获取的是页面显示内容的宽和高 AdMoveConfig.MoveWidth = winsize[2]; AdMoveConfig.MoveHeight = winsize[3]; AdMoveConfig.Scroll(); }; AdMoveConfig.Scroll = function () { var winscroll = getPageScroll();//获取页面滚动条的位置 AdMoveConfig.ScrollX = winscroll[0]; AdMoveConfig.ScrollY = winscroll[1]; }; addEvent(window, "resize", AdMoveConfig.Resize); addEvent(window, "scroll", AdMoveConfig.Scroll); function AdMove(id) { if (!AdMoveConfig.IsInitialized) { AdMoveConfig.Resize(); AdMoveConfig.IsInitialized = true; } var obj = document.getElementById(id); obj.style.position = "absolute"; var W = AdMoveConfig.MoveWidth - obj.offsetWidth; var H = AdMoveConfig.MoveHeight - obj.offsetHeight; var x = W * Math.random(), y = H * Math.random();//random() 方法可返回介于 0 ~ 1 之间的一个随机数 var rad = (Math.random() + 1) * Math.PI / 6; var kx = Math.sin(rad), ky = Math.cos(rad);//取X和Y的精确值 var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1); var step = 1; var interval; this.SetLocation = function (vx, vy) { x = vx; y = vy; } this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; } obj.CustomMethod = function () { obj.style.left = (x + AdMoveConfig.ScrollX) + "px"; obj.style.top = (y + AdMoveConfig.ScrollY) + "px"; rad = (Math.random() + 1) * Math.PI / 6; W = AdMoveConfig.MoveWidth - obj.offsetWidth; H = AdMoveConfig.MoveHeight - obj.offsetHeight; x = x + step * kx * dirx; if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); } if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); } y = y + step * ky * diry; if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); } if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); } }; this.Run = function () { var delay = 10; interval = setInterval(obj.CustomMethod, delay);//每隔delay调用一下obj.CustomMethod函数 obj.onmouseover = function () { clearInterval(interval); }//当鼠标移动到obj上时,停止取消由 setInterval() 设置的 timeout obj.onmouseout = function () { interval = setInterval(obj.CustomMethod, delay); }//当鼠标从obj上移开的时,冲洗开始调用obj.CustomMethod函数· } }
发表评论