Home > Article > Web Front-end > Javascript method to achieve flying advertising effect_javascript skills
The example in this article describes the method of using Javascript to achieve the effect of flying advertisements. Share it with everyone for your reference. The specific implementation method is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>飞动的广告</title> <style type="text/css"> body,div,p { margin:0; padding:0; font-size:14px; } #divMain { width:200px; height:800px; } </style> <script type="text/javascript"> var tmrID; var x = 1; var y = 1; function moveAD() { var divFly = document.getElementById("divFly"); var moveX = parseInt(divFly.style.left) + x * 5; var moveY = 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; } function ClearTimer() { clearInterval(tmrID); } function fly() { tmrID = setInterval(moveAD, 20); } window.onload = function () { var divFly = document.getElementById("divFly"); divFly.onmouseover = function () { ClearTimer(); } divFly.onmouseout = function () { fly(); } fly(); } function closeAD() { ClearTimer(); var divFly = document.getElementById("divFly"); divFly.style.display = "none"; } </script> </head> <body> <div id="divMain"></div> <div id="divFly" style="position:absolute;top:0;left:0;border:1px solid green;"> <img src="../images/fly.gif" height="60px" width="60px" /> <p><a href="javascript:void(0)" onclick="closeAD()">关闭</a></p> </div> </body> </html>
I hope this article will be helpful to everyone’s JavaScript programming design.