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

2019-11-20 10:40:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery实现div随意拖动的实例代码(通用代码)

下一篇：使用node+vue.js实现SPA应用