jQuery+cssで驚異のダイナミックブロックドリフトを実現effect

jQuery+cssで驚異のダイナミックブロックドリフトを実現effect_jquery

WBOY

リリース： 2016-05-16 15:17:22

オリジナル

1848 人が閲覧しました

この記事の例では、jQuery+css で実装された動的ブロックドリフト効果について説明します。詳細は次のとおりです。

実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

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

ログイン後にコピー

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「jQuery アニメーションと特殊効果の使用法の概要」および「一般的な古典的な特殊効果の概要」を参照してください。 jQuery"

の

この記事が jQuery プログラミングのすべての人に役立つことを願っています。