setTimeout 最终版本 面向对象可扩展
2014-02-01 13:28
330 查看
Object.extend=function(destination, source) { //extend方法表示继承 destination目标对象 source源对象 目标对象继承源对象所有属性方法
for (var property in source) { //循环所有property属性和方法
destination[property] = source[property]; //source对象的property属相和方法赋值给destination对象的property属性和方法
}
return destination; //返回扩展后的destination
}
//extend方法的所用是 destination目标对象的property属性继承source对象的property属性
function message(opt){ //opt参数是对象 message继承原型prototype属性的方法内的所有属性和方法 message的实例也拥有原型特性
this.objecs={ // message实例对象的objecs对象三个属性
oid:'',
oleft:0,
otop:0
};
this.settings={ //message实例对象的settings对象三个属性
x_max:200,
y_max:100,
times:100
};
this.objecs = Object.extend(this.objecs, opt); //message实例化对象的objecs属性 = Object对象的extend方法
//Object对象的extend方法传递两个参数 this.objecs对象和opt对象
//this.objecs对象继承opt对象的所有属性和方法
}
message.prototype.postitionMessage = function(){ //message对象的原型的方法postitionMessage
if(this.objecs.oid==''){ // 如果 message实例的objecs对象的oid属性为空
return;
}
this.parap = document.getElementById(this.objecs.oid); //id为message实例对象的objescs对象的oid属性
this.parap.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
this.movieMessage();
}
message.prototype.movieMessage = function(){
var self = this;
var xpos = parseInt(this.parap.style.left);
var ypos = parseInt(this.parap.style.top);
if(xpos<this.settings.x_max){xpos+=1;};
if(ypos<this.settings.y_max){ypos+=1;};
this.parap.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
if(xpos<this.settings.x_max || ypos<this.settings.y_max){
setTimeout(function(){self.movieMessage()},self.settings.times);
}
}
function messageObject(){
var s = new message({oid:'message',oleft:100,otop:50});
s.postitionMessage();
var s1 = new message({oid:'message1',oleft:120,otop:50});
s1.postitionMessage();
};
window.onload = messageObject;
</script>
</head>
<body>
<p id="message">Whee0</p>
<p id="message1">Whee1</p>
</body>
</html>
思路和编写过程
面向对象可扩展
步骤1 需要一个类 公用参数都写入类的内部 以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类
面向对象可扩展
步骤1 需要一个类 公用参数都写入类的内部 以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类
function Message(){
}
类内部的第一部分需要的是 获取DOM对象的id,初始化x,y的位置。实现代码如下:
function Message(){
this.objecs={
oid:"", //oid属性初始值为空 代表的是DOM的ID
oleft:0, //x轴的初始化位置
otop:0 //y轴的初始化位置
}
}
类内部还需要第二部分 作用是DOM对象移动的最大距离和一个时间属性表示每过多久执行一次，实现代码如下:
function Message(){
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
步骤2 需要对类进行扩展 以便可以实现所需要的功能 用prototype原型来进行扩展 实例化后的对象将会继承类的原型的所有方法和属性
写一个Message类的原型的postitionMessage方法函数 用来获取DOM对象和初始化DOM对象和调用另外一个执行动画的方法函数
实现代码如下:
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
步骤3 需要写一个用来执行动画的方法函数moveMessage 实现代码如下:
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.parap.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.parap.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.setting.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
步骤4 实例化类 因为我们写的是可以适用于多个DOM对象的 所以可以实例化两个已经更多的对象
var whee0 = new Message()
var whee1 = new Message()
我们需要一个函数 用来在window对象加载的时候执行 实现代码如下：
function messageObject(){
var whee0 = new Message()
var whee1 = new Message()
}
问题提出:messageObject函数内部目前只是写入了Message类 而Message类的作用只是来存放一些公共参数 并没有去调用动画方法函数
而动画方法函数是对象的原型方法positionMessage方法函数调用的 所以还需要在这个函数内部写入这个方法以便加载的时候来执行这个方法
内部的一些功能 实现代码如下:
function messageObject(){
var whee0 = new Message();
var whee1 = new Message();
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
完整代码如下:
function Message(){
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
thimes:100 //每次执行的间隔时间
}
}
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.parap.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.parap.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.setting.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
function messageObject(){
var whee0 = new Message();
var whee1 = new Message();
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
问题提出 由于Message类内部的第一部分
this.objecs={
oid:"",
oleft:0,
otop:0
}
是用来初始化存放dom对象的ID属性和初始化位置的 而上面的代码并没有传递参数进入Message所以还需要传递ID属性和初始化位置的参数
在实例化类的时候设置参数 实现代码如下:
function messageObject(){
var whee0 = new Message({oid:"message0",oleft:100,otop:50}); //将对象传入Message类
var whee1 = n
d44c
ew Message({oid:"message0",oleft:120,otop:50});
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
Message类的修改代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
问题提出 opt参数对象并没有使用到 我们还需要写一段代码 让opt参数能够使用上 为此可以写一段可以实现覆盖的代码
由于所有对象都是Object对象的子对象 所以我们写一个Object对象上写一个方法函数
实现代码如下：
Object.extend = function(destination, source){)
这个函数有两个参数 分别代表目标对象和源对象
需要实现的功能是 让目标对象可以继承源对象的所以属性和方法 因为是继承所有 所以需要一个循环 由于循环需要获取的是属性的值 所以使用for...in...循环
实现代码如下:
Object.extend = function(destination, source){
for(var property in source){ //由于需要继承的是source内的所有属性 所以要循环这个对象
destination[property] = source[prooerty] //将source对象内部的每个属性都赋值给destination的属性
}
return destination; //返回扩展后的destination
}
问题提出 这段代码写好了 应该如何使用 我们再看看Message类 因为是这个类来获取和初始化DOM对象的id属性和位置的
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
现在我们需要的是让pot对象参数内部的属性来覆盖objecs对象内部的属性 所以就需要使用上面写的覆盖代码 实现代码如下
this.objecs = Object.extend(this.objecs,opt)
将this.objecs对象重新写为可以覆盖的代码 将这段代码加入到Message类中 实现代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.objecs = Object.extend(this.objecs,opt);
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
最终完整代码如下：
Object.extend=function(destination, source) { //extend方法表示继承 destination目标对象 source源对象 目标对象继承源对象所有属性方法
for (var property in source) { //循环所有property属性和方法
destination[property] = source[property]; //source对象的property属相和方法赋值给destination对象的property属性和方法
}
return destination; //返回扩展后的destination
};
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.objecs = Object.extend(this.objecs,opt);
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return;}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.para.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.para.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.settings.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
function messageObject(){
var whee0 = new Message({oid:"message0",oleft:100,otop:50}); //将对象传入Message类
var whee1 = new Message({oid:"message1",oleft:120,otop:50});
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
window.onload = messageObject;
<p id="message0">Whee0</p>
<p id="message1">Whee1</p>
for (var property in source) { //循环所有property属性和方法
destination[property] = source[property]; //source对象的property属相和方法赋值给destination对象的property属性和方法
}
return destination; //返回扩展后的destination
}
//extend方法的所用是 destination目标对象的property属性继承source对象的property属性
function message(opt){ //opt参数是对象 message继承原型prototype属性的方法内的所有属性和方法 message的实例也拥有原型特性
this.objecs={ // message实例对象的objecs对象三个属性
oid:'',
oleft:0,
otop:0
};
this.settings={ //message实例对象的settings对象三个属性
x_max:200,
y_max:100,
times:100
};
this.objecs = Object.extend(this.objecs, opt); //message实例化对象的objecs属性 = Object对象的extend方法
//Object对象的extend方法传递两个参数 this.objecs对象和opt对象
//this.objecs对象继承opt对象的所有属性和方法
}
message.prototype.postitionMessage = function(){ //message对象的原型的方法postitionMessage
if(this.objecs.oid==''){ // 如果 message实例的objecs对象的oid属性为空
return;
}
this.parap = document.getElementById(this.objecs.oid); //id为message实例对象的objescs对象的oid属性
this.parap.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
this.movieMessage();
}
message.prototype.movieMessage = function(){
var self = this;
var xpos = parseInt(this.parap.style.left);
var ypos = parseInt(this.parap.style.top);
if(xpos<this.settings.x_max){xpos+=1;};
if(ypos<this.settings.y_max){ypos+=1;};
this.parap.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
if(xpos<this.settings.x_max || ypos<this.settings.y_max){
setTimeout(function(){self.movieMessage()},self.settings.times);
}
}
function messageObject(){
var s = new message({oid:'message',oleft:100,otop:50});
s.postitionMessage();
var s1 = new message({oid:'message1',oleft:120,otop:50});
s1.postitionMessage();
};
window.onload = messageObject;
</script>
</head>
<body>
<p id="message">Whee0</p>
<p id="message1">Whee1</p>
</body>
</html>
思路和编写过程
面向对象可扩展
步骤1 需要一个类 公用参数都写入类的内部 以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类
面向对象可扩展
步骤1 需要一个类 公用参数都写入类的内部 以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类
function Message(){
}
类内部的第一部分需要的是 获取DOM对象的id,初始化x,y的位置。实现代码如下:
function Message(){
this.objecs={
oid:"", //oid属性初始值为空 代表的是DOM的ID
oleft:0, //x轴的初始化位置
otop:0 //y轴的初始化位置
}
}
类内部还需要第二部分 作用是DOM对象移动的最大距离和一个时间属性表示每过多久执行一次，实现代码如下:
function Message(){
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
步骤2 需要对类进行扩展 以便可以实现所需要的功能 用prototype原型来进行扩展 实例化后的对象将会继承类的原型的所有方法和属性
写一个Message类的原型的postitionMessage方法函数 用来获取DOM对象和初始化DOM对象和调用另外一个执行动画的方法函数
实现代码如下:
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
步骤3 需要写一个用来执行动画的方法函数moveMessage 实现代码如下:
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.parap.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.parap.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.setting.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
步骤4 实例化类 因为我们写的是可以适用于多个DOM对象的 所以可以实例化两个已经更多的对象
var whee0 = new Message()
var whee1 = new Message()
我们需要一个函数 用来在window对象加载的时候执行 实现代码如下：
function messageObject(){
var whee0 = new Message()
var whee1 = new Message()
}
问题提出:messageObject函数内部目前只是写入了Message类 而Message类的作用只是来存放一些公共参数 并没有去调用动画方法函数
而动画方法函数是对象的原型方法positionMessage方法函数调用的 所以还需要在这个函数内部写入这个方法以便加载的时候来执行这个方法
内部的一些功能 实现代码如下:
function messageObject(){
var whee0 = new Message();
var whee1 = new Message();
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
完整代码如下:
function Message(){
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
thimes:100 //每次执行的间隔时间
}
}
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.parap.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.parap.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.setting.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
function messageObject(){
var whee0 = new Message();
var whee1 = new Message();
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
问题提出 由于Message类内部的第一部分
this.objecs={
oid:"",
oleft:0,
otop:0
}
是用来初始化存放dom对象的ID属性和初始化位置的 而上面的代码并没有传递参数进入Message所以还需要传递ID属性和初始化位置的参数
在实例化类的时候设置参数 实现代码如下:
function messageObject(){
var whee0 = new Message({oid:"message0",oleft:100,otop:50}); //将对象传入Message类
var whee1 = n
d44c
ew Message({oid:"message0",oleft:120,otop:50});
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
Message类的修改代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
问题提出 opt参数对象并没有使用到 我们还需要写一段代码 让opt参数能够使用上 为此可以写一段可以实现覆盖的代码
由于所有对象都是Object对象的子对象 所以我们写一个Object对象上写一个方法函数
实现代码如下：
Object.extend = function(destination, source){)
这个函数有两个参数 分别代表目标对象和源对象
需要实现的功能是 让目标对象可以继承源对象的所以属性和方法 因为是继承所有 所以需要一个循环 由于循环需要获取的是属性的值 所以使用for...in...循环
实现代码如下:
Object.extend = function(destination, source){
for(var property in source){ //由于需要继承的是source内的所有属性 所以要循环这个对象
destination[property] = source[prooerty] //将source对象内部的每个属性都赋值给destination的属性
}
return destination; //返回扩展后的destination
}
问题提出 这段代码写好了 应该如何使用 我们再看看Message类 因为是这个类来获取和初始化DOM对象的id属性和位置的
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
现在我们需要的是让pot对象参数内部的属性来覆盖objecs对象内部的属性 所以就需要使用上面写的覆盖代码 实现代码如下
this.objecs = Object.extend(this.objecs,opt)
将this.objecs对象重新写为可以覆盖的代码 将这段代码加入到Message类中 实现代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.objecs = Object.extend(this.objecs,opt);
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
最终完整代码如下：
Object.extend=function(destination, source) { //extend方法表示继承 destination目标对象 source源对象 目标对象继承源对象所有属性方法
for (var property in source) { //循环所有property属性和方法
destination[property] = source[property]; //source对象的property属相和方法赋值给destination对象的property属性和方法
}
return destination; //返回扩展后的destination
};
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.objecs = Object.extend(this.objecs,opt);
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return;}; //如果oid属性值为空就返回 不执行下面代码 为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象 这里我们不需要window对象 需要的是类实例化后的对象
var xpos = parseInt(this.para.style.left); //获取DOM对象x轴的位置 并且用parseInt转化为数字
var ypos = parseInt(this.para.style.top); //获取DOM对象y轴的位置 并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置 小于x轴的目标位置 那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置 小于y轴的目标位置 那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.settings.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
function messageObject(){
var whee0 = new Message({oid:"message0",oleft:100,otop:50}); //将对象传入Message类
var whee1 = new Message({oid:"message1",oleft:120,otop:50});
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
window.onload = messageObject;
<p id="message0">Whee0</p>
<p id="message1">Whee1</p>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- tabhost，framelayout，tabwidget(一)
- 超简代码版设计模式系列十四
- 18-Linux-网络配置
- do {...} while (0) 的用途汇总（欢迎补充）
- [Java] Spring 3.0 IOC 笔记
- [Java] Spring 3.0 IOC 笔记
- 关于开发的点点滴滴
- 设计模式知识概要
- tomcat部署web应用
- 【题解】【数组】【Leetcode】Merge Sorted Array
- Nginx初步-6：使用CUDA为PHP加速
- How to build monitoring system with Face Recognization by HTC Hero、VideoLAN and EmguCV.
- How to solve the Eclipse's endless "Subversion Connector Discovery" proglem
- 关于unity3d插件的自动打包
- BasicStroke参数详解[转]
- Titanium开发环境搭建第一个坑
- Theano学习三----Theano function
- 如何复制表结构、如何复制表数据：
- POJ 2752 kmp next数组理解
- Python聊天室程序---基础