jQuery+css实现炫目的动态块漂移效果

前端技术 2023/09/04 JavaScript

本文实例讲述了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 ? left - width : left;
      top = top > height ? 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9828

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案