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 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
js比较日期大小的方法
May 12 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
js实现随机点名小功能
Aug 17 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 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
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python 如何引入协程和原理分析
2020/11/30 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
安全协议书
2014/04/23 职场文书
商业融资计划书
2014/04/29 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
借钱欠条怎么写
2015/07/03 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
MySQL8.0的WITH查询详情
2021/08/30 MySQL