jQuery+css实现炫目的动态块漂移效果
2016-01-28 00:00
831 查看
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery+css3实现转动的正方形效果(附demo源码下载)
jquery+css3实现会动的小圆圈效果
jQuery+css实现的换页标签栏效果
jQuery+CSS实现滑动的标签分栏切换效果
jquery+css实现动感的图片切换效果
jQuery+CSS3实现3D立方体旋转效果
jQuery+CSS3折叠卡片式下拉列表框实现效果
jQuery+css实现的蓝色水平二级导航菜单效果代码
jquery+CSS3模拟Path2.0动画菜单效果代码
运行效果截图如下:
具体代码如下:
<!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+css实现的时钟效果(兼容各浏览器)jQuery+css3实现转动的正方形效果(附demo源码下载)
jquery+css3实现会动的小圆圈效果
jQuery+css实现的换页标签栏效果
jQuery+CSS实现滑动的标签分栏切换效果
jquery+css实现动感的图片切换效果
jQuery+CSS3实现3D立方体旋转效果
jQuery+CSS3折叠卡片式下拉列表框实现效果
jQuery+css实现的蓝色水平二级导航菜单效果代码
jquery+CSS3模拟Path2.0动画菜单效果代码
相关文章推荐
- jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
- jQuery+canvas实现的球体平抛及颜色动态变换效果
- 基于jQuery实现以手风琴方式展开和折叠导航菜单
- jQuery获取checkbox选中的值
- jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件
- jquery 删除数组元素
- 【jQuery基础学习】03 jQuery中的事件与动画
- jQuery第四章
- jQuery第三章
- 《锋利的jQuery》第1-3章
- 通过jQuery在IE中支持placeholder
- jQuery源码分析
- 使用jquery获取父元素或父节点的方法
- datatabls动态解析数据
- jQuery插件学习
- jQuery动态绑定
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jquery中的过滤操作详细解析
- jquery中remove()与detach()的区别
- jquery.validate remote 和 自定义验证方法