广告狂页面随意滚动效果

#####1.先给广告框一个绝对定位，设置left，top的值,给出广告在页面中的位置 <div id="ad" style="position:absolute;left:10px;top:10px;"> <img src="guanggao.jpg" alt=""> </div> #####2.获取元素 var ad = document.getElementById('ad'); #####3.定义所需要的全局变量 var vx = -1; 设置水平方向 var vy = -1;设置垂直方向 var xh = null; 设置循环变量 #####4.给广告框定义事件 (1)让广告在页面加载完成之后运动，设置window.onload或者定义地执行函数,定义一个start函数并且调用 window.onload = function(){ …… } (function(){ …… })(); (2) 当鼠标经过让广告框暂停 ad.onmouoseover = stop; (3) 当鼠标经过后鼠标离开时让广告框继续运动 ad.onmouseover = start; (4) 当鼠标点击时，让广告框消失 ad.onclick = hide; #####5.start函数： (1) 定义一个计数器函数 setInterval (2) 获取可视窗口的宽高 var win_x = window.innerWidth?window.innerWidth:document.documentElement.clientWidth; var win_y = window.innerHeight?window.innerHeight:document.documentElement.clientHeight; (3)获取广告框距离浏览器左边以及上边的距离，由于gg.style.left获取的是类似与100px的值，需要parseInt函数使其只显示数字 var x =parseInt( gg.style.left); var y = parseInt(gg.style.top); (4) 判断条件 i. 当广告框到达底部或从底部到达顶部的时候，让其垂直运动方向改变 if(y<0){ vy = -vy; } if(y>(win_y-广告框的高度)){ vy = -vy; } ii. 当广告框碰到右边或从右边到达左边的时候，让其水平方向改变 if(x<0){ vx = -vx; } if(x>(win_x-广告框的宽度)){ vx = -vx; } (5) 重新赋值 y = y - vy; x = x - vx; gg.style.left = x + 'px'; gg.style.top = y + 'px'; #####6.stop函数 清除循环函数 clearInterval(xh); #####7.hide函数 清除循环函数 clearInterval(xh); 设置广告框display样式为none gg.style.display = 'none'; #####8.js代码 window.onload = function(){
var gg = document.getElementById('gg'); gg.onmouseover = stop; gg.onmouseout = start; gg.onclick = hide; var vx = -1,vy = -1, xh = null; function start(){ xh = setInterval(function(){ var win_w = window.innerWidth?window.innerWidth:document.documentElement.clientWidth; var win_h = window.innerHeight?window.innerHeight:document.documentElement.clientHeight; var x = parseInt(gg.style.left); var y = parseInt(gg.style.top); if(y > (win_h-100)){ vy=-vy; } if(y < 0){ vy = -vy; } if(x > (win_w - 100)){ vx = -vx; } if(x < 0){ vx = -vx; } y = y - vy; x = x - vx; gg.style.left = x + 'px'; gg.style.top = y + 'px'; },10); } start(); function stop(){ clearInterval(xh); } function hide(){ clearInterval(xh); gg.style.display = 'none'; } }

转载于:https://my.oschina.net/u/2402530/blog/802248