使用面向对象的方法实现一个萤火虫的效果。
页面样式,bg.jpg是一张动图,使用的是jQuery。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
background: url(img/bg.jpg) no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
img{
position: absolute;
width: 38px;
height: 38px;
/*left:100px;
top:100px;*/
}
</style>
</head>
<body>
<!--<img src="img/1.jpg"/>-->
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</html>
js:
var firefly = new Object(); //创建firefly这个对象
//下面是这个对象所具有的一些方法属性(我们自己定义)
firefly.element = $("<img src = 'img/1.jpg'/>"); //创建html结构
//显示
firefly.show = function(){
this.element.css({
left:this.showPoint().pointX,
top:this.showPoint().pointY
});
$("body").append(this.element);
}
//显示的坐标位置在屏幕上
firefly.showPoint = function (){
var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
return {
pointX:pointX,
pointY:pointY
}
}
//飞行时间
firefly.flyTime = function(){
//时间为2-5秒
var flyTime = Math.floor((Math.random()*3+2)*1000);
return flyTime;
}
//飞行
firefly.run = function(){
//alert(this.flyTime())
var self = this;
this.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},this.flyTime(),function(){
self.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},self.flyTime(),arguments.callee);
});
}
firefly.show(); //显示出来
firefly.run(); //开始飞行
下面使用工厂模式实现
//工厂模式,一定要加return 返回当前创建的对象
function createFireFly(){
var firefly = new Object();
firefly.element = $("<img src = 'img/1.jpg'/>");
firefly.show = function(){
this.element.css({
left:this.showPoint().pointX,
top:this.showPoint().pointY
});
$("body").append(this.element);
}
firefly.showPoint = function (){
var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
return {
pointX:pointX,
pointY:pointY
}
}
firefly.flyTime = function(){
//时间为2-5秒
var flyTime = Math.floor((Math.random()*3+2)*1000);
return flyTime;
}
firefly.run = function(){
//alert(this.flyTime())
var self = this;
this.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},this.flyTime(),function(){
self.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},self.flyTime(),arguments.callee);
});
}
//至关重要
return firefly;
}
//创建多个
for(var i = 0; i < 20; i++){
var fire1 = createFireFly();
fire1.show();
fire1.run();
}
使用构造函数
//构造函数(使用this指向)
function Firefly(){
this.element = $("<img src = 'img/1.jpg'/>");
this.show = function(){
this.element.css({
left:this.showPoint().pointX,
top:this.showPoint().pointY
});
$("body").append(this.element);
}
this.showPoint = function (){
var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
return {
pointX:pointX,
pointY:pointY
}
}
this.flyTime = function(){
//时间为2-5秒
var flyTime = Math.floor((Math.random()*3+2)*1000);
return flyTime;
}
this.run = function(){
//alert(this.flyTime())
var self = this;
this.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},this.flyTime(),function(){
self.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},self.flyTime(),arguments.callee);
});
}
}
//创建多个
for(var i = 0; i < 20; i++){
var fire1 = new Firefly();
fire1.show();
fire1.run();
}
构造函数加原型链
function Firefly(){
this.element = $("<img src = 'img/1.jpg'/>");
}
//原型模式
Firefly.prototype.show = function(){
this.element.css({
left:this.showPoint().pointX,
top:this.showPoint().pointY
});
$("body").append(this.element);
}
Firefly.prototype.showPoint = function (){
var pointX = Math.abs(Math.random()*window.innerWidth - 18) +"px";
var pointY = Math.abs(Math.random()*window.innerHeight - 18) +"px";
return {
pointX:pointX,
pointY:pointY
}
}
Firefly.prototype.flyTime = function(){
//时间为2-5秒
var flyTime = Math.floor((Math.random()*3+2)*1000);
return flyTime;
}
Firefly.prototype.run = function(){
//alert(this.flyTime())
var self = this;
this.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},this.flyTime(),function(){
self.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
},self.flyTime(),arguments.callee);
});
}
for(var i = 0; i < 20; i++){
var fire1 = new Firefly();
fire1.show();
fire1.run();
}
模拟java
//面向对象,模拟java
function Firefly(){
this.element = $("<img src = 'img/1.jpg'/>");
this.setPointX = function(value){
this.pointX = value;
}
this.getPointX = function(){
return this.pointX;
}
this.setPointY = function(value){
this.pointY = value;
}
this.getPointY = function(){
return this.pointY;
}
this.setRunTime = function(value){
this.runtime = value;
}
this.getRunTime = function(){
return this.runtime;
}
}
Firefly.prototype.show = function(){
this.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px");
this.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px");
this.element.css({
left:this.getPointX(),
top:this.getPointY()
});
$("body").append(this.element);
}
Firefly.prototype.run = function(){
//alert(this.flyTime())
var self = this;
this.element.animate({
left: this.getPointX(this.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px")),
top: this.getPointY(this.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px"))},this.getRunTime(this.setRunTime(Math.floor((Math.random()*3+2)*1000))),function(){
self.element.animate({
left: self.getPointX(self.setPointX(Math.abs(Math.random()*window.innerWidth - 18) +"px")),
top: self.getPointY(self.setPointY(Math.abs(Math.random()*window.innerHeight - 18) +"px")) },self.getRunTime(self.setRunTime(Math.floor((Math.random()*3+2)*1000))),arguments.callee);
});
}
for(var i = 0; i < 20; i++){
var fire1 = new Firefly();
fire1.show();
fire1.run();
}