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


Posted in Javascript onJanuary 28, 2016

本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下:

运行效果截图如下:

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程序设计有所帮助。

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
js中的面向对象入门
Mar 06 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
几种tab切换详解
2017/02/03 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python语法快速入门指南
2015/10/12 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
夜大自我鉴定
2013/10/31 职场文书
企业给企业的表扬信
2014/01/13 职场文书
小学开学寄语
2014/01/19 职场文书
个人求职信范文
2014/05/24 职场文书
小学生优秀评语
2014/12/29 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
绿里奇迹观后感
2015/06/15 职场文书
律师催款函范文
2015/06/24 职场文书