Javascript实现飞动广告效果的方法
本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>飞动的广告</title> <styletype="text/css"> body,div,p { margin:0; padding:0; font-size:14px; } #divMain { width:200px; height:800px; } </style> <scripttype="text/javascript"> vartmrID; varx=1; vary=1; functionmoveAD(){ vardivFly=document.getElementById("divFly"); varmoveX=parseInt(divFly.style.left)+x*5; varmoveY=parseInt(divFly.style.top)+y*5; //divFly.offsetWidth if((moveX+divFly.offsetWidth)>=document.body.clientWidth){ x=-1; } if((moveY+divFly.offsetHeight)>=document.body.clientHeight){ y=-1; } if(moveX<=0){ x=1; } if(moveY<=0){ y=1; } divFly.style.left=moveX; divFly.style.top=moveY; } functionClearTimer(){ clearInterval(tmrID); } functionfly(){ tmrID=setInterval(moveAD,20); } window.onload=function(){ vardivFly=document.getElementById("divFly"); divFly.onmouseover=function(){ ClearTimer(); } divFly.onmouseout=function(){ fly(); } fly(); } functioncloseAD(){ ClearTimer(); vardivFly=document.getElementById("divFly"); divFly.style.display="none"; } </script> </head> <body> <divid="divMain"></div> <divid="divFly"style="position:absolute;top:0;left:0;border:1pxsolidgreen;"> <imgsrc="../images/fly.gif"height="60px"width="60px"/> <p><ahref="javascript:void(0)"onclick="closeAD()">关闭</a></p> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。