jQuery+css实现炫目的动态块漂移效果
编程学习 2021-07-04 21:04www.dzhlxh.cn编程入门
这篇文章主要介绍了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相关内容感兴趣的读者可查看本站专题：《》及《》
希望本文所述对大家jQuery程序设计有所帮助。