信鸽网

Javascript实现飞动广告效果的方法

  作者：bea

本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下： <!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>&

本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下：




<!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>


希望本文所述对大家的javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: