jQuery CSS réalise un effet de dérive de bloc dynamique éblouissant

jQuery CSS réalise un effet de dérive de bloc dynamique éblouissant_jquery

WBOY

Libérer： 2016-05-16 15:17:22

original

1844 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de dérive de bloc dynamique implémenté par jQuery CSS. Je le partage avec vous pour votre référence. Les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

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

Copier après la connexion

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation des animations et des effets spéciaux jQuery" et "Résumé des effets spéciaux classiques courants de jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.