js面向对象（萤火虫效果）

使用面向对象的方法实现一个萤火虫的效果。
页面样式，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();
}

js面向对象（萤火虫效果）相关推荐

html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
如何利用js实现萤火虫效果
如何利用js实现萤火虫效果前言首先分析萤火虫需要的步骤 2.1随机数函数 2.3获取dom和生成随机坐标 2.3创建生成div 3.我们就可以先创建出这个实例 4.最后就是带入我们封装的move缓 ...
原生JS实现萤火虫效果
css部分: <style>.box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: ...
js面向对象模拟京东商城图片放大效果
js面向对象模拟京东商城图片放大效果 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力.本文简单介绍一下使用JavaScript面向对象思想模拟京东商城鼠标悬浮 ...
JS面向对象——利用transform实现扇子效果
描述: JS面向对象--利用transform实现扇子效果效果: 实现: <!DOCTYPE html> <html lang="en"> <hea ...
Canvas星空效果（JS面向对象）
概述更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 ...
简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
js面向对象编程基础
js面向对象文章目录 js面向对象对象的引用原型和原型链系统对象与包装对象面向对象相关语法对象的引用类型比较方式对象比较时,值跟引用地址都相同时才相等. 类型赋值方式 ...
【何不三连】JS面向对象最后一弹-多态篇(羽化升仙)
前言你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 首先抱歉让大家久等了,大家一直期待的"多态"篇到现在才来 ????,其实我最近挺忙的,给张手机截图让大家感受一下 ...

js面向对象（萤火虫效果）

js面向对象（萤火虫效果）相关推荐

最新文章

热门文章