jquery动态生成元素并飘落效果
分类：实例代码
本章节分享一段代码实例，它实现了动态生成元素，并且渐隐渐现飘落效果。
当然此效果可能不见得有什么实际应用场景，不过可以一个操作DOM元素的实例加以学习。
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></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>
</head>
<body>
<div id="body" class="shadow radius"></div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu