Javascript-Methode zur Erlangung fliegender Werbeeffekte_Javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript-Methode zur Erlangung fliegender Werbeeffekte_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:57:43

Original

1414 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode, mit Javascript den Effekt fliegender Werbung zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.