飘动的广告
上一节
下一节
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>飘动的广告</title> | |
| <style> | |
| *{ | |
| padding:0; | |
| margin:0; | |
| } | |
| li{ | |
| list-style-type:none; | |
| } | |
| img{ | |
| border:none; | |
| } | |
| #flAdv{ | |
| position:absolute; | |
| width:100px; | |
| height:100px; | |
| /*测试看效果 | |
| top:100px; | |
| left:100px; | |
| */ | |
| } | |
| #flAdv img{ | |
| width:100px; | |
| height:100px; | |
| } | |
| #close{ | |
| display:block; | |
| width:20px; | |
| height:20px; | |
| position:absolute; | |
| top:0px; | |
| right:0px; | |
| background:#999; | |
| color:#000; | |
| line-height:20px; | |
| text-align:center; | |
| border:#666 solid 1px; | |
| cursor:pointer; | |
| } | |
| </style> | |
| <script> | |
| window.onload = function() | |
| { | |
| //1. 获取对象并定义变量 | |
| //获取广告对象 | |
| var oFL = document.getElementById('flAdv'); | |
| //获取关闭按钮对象 | |
| var closeBtn = document.getElementById('close'); | |
| //定义广告对象宽度 | |
| var advWidth = oFL.offsetWidth; | |
| //定义广告对象的高度 | |
| var advHeight= oFL.offsetHeight; | |
| //定义body的宽度 | |
| var bodyWidth = document.documentElement.clientWidth; | |
| //定义body的高度 | |
| var bodyHeight= document.documentElement.clientHeight; | |
| //测试 | |
| console.log(bodyWidth+":"+bodyHeight); | |
| //定义广告对象水平方向距离body的左边的距离为xPos | |
| var xPos = bodyWidth-advWidth; | |
| //定义广告对象垂直方向距离body的上边的距离为yPos | |
| var yPos = Math.floor(bodyHeight/2); | |
| console.log(xPos+":"+yPos); | |
| //定义飘动的方向 | |
| var x =0 ;//若x=0,则向左飘动，否则向右飘动 | |
| var y =0 ;//若y=0,则向上飘动，否则向下飘动 | |
| //定义移动步长step | |
| var step = 1;//每次移动1px距离 | |
| //定义时间间隔delay | |
| var delay = 100;//100毫秒 | |
| //定义定时器 | |
| var timer; | |
| //2. 改变位置的函数 | |
| function changePos() | |
| { | |
| //重新计算body的宽度和高度 | |
| bodyWidth = document.documentElement.clientWidth; | |
| bodyHeight= document.documentElement.clientHeight; | |
| //定位对象位置 | |
| oFL.style.left = xPos + 'px'; | |
| oFL.style.top = yPos + 'px'; | |
| //运动方向判断 | |
| //若x=1，则向右飘 +step | |
| //若x=0，则向左飘 -step | |
| if(x) xPos = xPos + step; | |
| else xPos = xPos - step; | |
| //若y=1，则向下飘 +step | |
| //若y=0，则向上飘 -step | |
| if(y) yPos = yPos + step; | |
| else yPos = yPos - step; | |
| //更新对象位置 | |
| if(xPos<0) | |
| { | |
| xPos = 0;//重新初始化 | |
| x = 1;//改变方向 | |
| } | |
| if(xPos>=bodyWidth-advWidth) | |
| { | |
| xPos = bodyWidth-advWidth; | |
| x = 0; | |
| } | |
| if(yPos<0) | |
| { | |
| yPos = 0; | |
| y = 1; | |
| } | |
| if(yPos>=bodyHeight-advHeight) | |
| { | |
| yPos = bodyHeight-advHeight; | |
| y = 0; | |
| } | |
| } | |
| //3. 广告初始化函数 | |
| function start() | |
| { | |
| //每隔5毫秒调用一次changePos() | |
| timer = setInterval(changePos,delay); | |
| } | |
| //4. 调用广告初始化函数 | |
| start(); | |
| //5. 为飘动的广告对象添加鼠标移入事件 | |
| oFL.onmouseover = function() | |
| { | |
| clearInterval(timer); | |
| timer=null; | |
| }; | |
| //6. 为飘动的广告对象添加鼠标移出事件 | |
| oFL.onmouseout = function() | |
| { | |
| timer = setInterval(changePos,delay); | |
| }; | |
| //7.关闭浮动广告停止计时 | |
| closeBtn.onclick = function() | |
| { | |
| clearInterval(timer); | |
| oFL.style.display = 'none'; | |
| }; | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="flAdv"> | |
| <img src="upload/middle1.jpg"/> | |
| <span id="close">×</span> | |
| </div> | |
| </body> | |
| </html> |
