使用Javascript实现广告鱼的效果

实现代码如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>广告鱼</title> <mce:script type="text/javascript"><!-- var isRight=true,isDown=true; //先设定默认为向右和向下移动 init = function() { var timeThread = window.setInterval("move()",10); // 每10秒调用“move()”方法,并将其赋给一个(线程)变量 document.getElementById("div1").onmouseover = function(){window.clearInterval(timeThread)}; //当鼠标在上时停止这个线程(使用匿名方法) document.getElementById("div1").onmouseout = function(){timeThread = window.setInterval("move()",10)}; //当鼠标离开时,再每10秒调用“move()”方法,并将其赋给一个(线程)变量 } move = function() { var div1 = document.getElementById("div1"); var minX=minY=0; //设定最小的X轴和最小的Y轴都为0px var maxX=document.body.clientWidth-div1.offsetWidth; //设定层在X轴可移动的最大宽度:浏览器的宽度-层的宽度 var maxY=document.body.clientHeight-div1.offsetHeight;//设定层在Y轴可移动的最大高度:浏览器的高度-层的高度 if(div1.offsetLeft+1>maxX){isRight=false;} //如果层移动到了最右边的边界位置时,则修改X轴的状态为不能向右了 if(div1.offsetLeft-1<minX){isRight=true;} //如果层移动到了最左边的边界位置时,则修改X轴的状态为不能向左了 div1.style.left=div1.offsetLeft+1*(isRight==true?1:-1); //先判断层在X轴的方向是向左(或是右),再执行+1(或-1) document.getElementById("img1").src=(isRight==true?"fish1.gif":"fish2.gif"); //鱼头向左或向右 if(div1.offsetTop+1>maxY){isDown=false;} //如果层移动到了最底边的边界位置时,则修改Y轴的状态为不能向下了 if(div1.offsetTop-1<minY){isDown=true;} //如果层移动到了最顶边的边界位置时,则修改Y轴的状态为不能向上了 div1.style.top=div1.offsetTop+1*(isDown==true?1:-1); //先判断层在Y轴的方向是向下(或是上),再执行+1(或-1) } window.onload=init; //页面初始化时绑定(调用)"init()"方法 // --></mce:script> </head> <body> <div id="div1" style="position:absolute" mce_style="position:absolute" > <!--该广告层一定要先设定为绝对定位--> <a href="http://571.jjii.net" mce_href="http://571.jjii.net"><img id="img1" style="border:none" mce_style="border:none" src="fish1.gif" mce_src="fish1.gif" /></a> </div> </body> </html>

你可能感兴趣的:(使用Javascript实现广告鱼的效果)