suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery-CSS erzielt einen atemberaubenden dynamischen Blockdrift-Effekt_jquery

jQuery-CSS erzielt einen atemberaubenden dynamischen Blockdrift-Effekt_jquery

WBOY
WBOYOriginal
2016-05-16 15:17:221840Durchsuche

Das Beispiel in diesem Artikel beschreibt den von jQuery CSS implementierten dynamischen Blockdrifteffekt. Die Details sind wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code 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>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    function createColor() {
      var color = [];
      for (var i = 0; i < 3; i++) {
        color.push(Math.round(Math.random() * 256));
      }
      return "rgb(" + color.join(",") + ")"
    }
    function createRect(left, top, index) {
      var width = Math.round(Math.random() * 150) + 10;
      var height = Math.round(Math.random() * 150) + 10;
      left = left > width &#63; left - width : left;
      top = top > height &#63; top - height : top;
      var html = [];
      html.push('<div id="rect_'+index+'" class="rect shadow radius" style="background:');
      html.push(createColor());
      html.push(';left:');
      html.push(left);
      html.push('px;top:');
      html.push(top);
      html.push('px;width:');
      html.push(width);
      html.push('px; height:');
      html.push(height);
      html.push('px;"></div>');
      return html.join("");
    }
    function initRect() {
      var body = $("#body");
      var width = body.width();
      var height = body.height();
      var index = new Date().getTime();
      body.append(createRect(Math.round(Math.random() * width), Math.round(Math.random() * height), index));
      setAnimate(index, height);
    }
    function setAnimate(index, height) {
      var rect = $("#rect_" + index);
      var top = parseInt(rect.position().top);
      var selfHeight = rect.height();
      if (top > height - selfHeight) {
        rect.remove();
        initRect();
      } else {
        var filter = top / height;
        rect.css({ "top": (top + 5) + "px", "opacity": filter });
        setTimeout(function () {
          setAnimate(index, height);
        }, 33);
      }
    }
    function initAllRect() {
      for (var i = 0; i < 20; i++) {
        initRect();
      }
    }
    $(document).ready(function () {
      initAllRect();
    });
  </script>
  <style type="text/css" >
  .rect {
        background:#DDDDDD;
        width:100px;
        height:100px;
        position:absolute;
  }
  .radius 
  {
    border-radius:8px;
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
  }
  .shadow 
  {
    -moz-box-shadow:-5px -5px 5px #999 inset;
      -webkit-box-shadow:-5px -5px 5px #999 inset;
      box-shadow:-5px -5px 5px #999 inset; 
  }
  #body { height:700px; width:100%; background:black; margin:0; }
  </style>
</head>
<body>
<div id="body" class="shadow radius">
</div>
</body>
</html>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger klassischer Spezialeffekte.“ von jQuery"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS CSS realisiert den Erweiterungs- und Kontraktionseffekt der DIV-Layer_Javascript-FähigkeitenNächster Artikel：JS CSS realisiert den Erweiterungs- und Kontraktionseffekt der DIV-Layer_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen