jquery随机飞舞的小虫效果
分类：实例代码
分享一段代码实例，它实现了随机飞舞的小虫效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bg {
width: 100%;
height: 100%;
position: fixed;
background-size: cover;
background-color:black;
}
.xx {
width: 18px;
height: 18px;
position: absolute;
color: white;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function Fireworm() {
this.element = $("<div class='xx'>*</div>");
}
Fireworm.prototype.show = function() { //显示
this.element.css({
"top": this.pointY + "px",
"left": this.pointX + "px"
})
$("body").append(this.element);
return this;
};
Fireworm.prototype.newPoint = function() {
this.pointX = randomInt(window.innerWidth - 100);
this.pointY = randomInt(window.innerHeight - 100);
return this;
};
Fireworm.prototype.speed = function() {
this.speedRun = (randomInt(10) + 5) * 1000;
return this;
};
Fireworm.prototype.fly = function() { //飞
var self = this;
this.element.animate({
"top": this.pointY,
"left": this.pointX
}, this.speedRun, function() {
self.speed().newPoint().fly();
})
};
function randomInt(max) {
return Math.floor(Math.random() * max);
};
$(function() {
var totle = 30;
var fireworm = [];
for (var i = 0; i < totle; i++) {
fireworm[i] = new Fireworm();
fireworm[i].newPoint().show().speed().newPoint().fly()
}
})
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
jquery随机飞舞的小虫效果，这样的场景在实际项目中还是用的比较多的，关于jquery随机飞舞的小虫效果就介绍到这了。
jquery随机飞舞的小虫效果属于前端实例代码，有关更多实例代码大家可以查看。