jQuery+css实现炫目的动态块漂移效果
发布于 2017-04-09 10:59:00 | 143 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。
这篇文章主要介绍了jQuery+css实现的动态块漂移效果,涉及jQuery基于随机数与时间函数动态操作页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
推荐阅读
最新资讯