|
转眼之间已经第七课了,这也将成为最后一课,假如这7课下来您感受程度没有到达预想的程度,不要紧您可以继承存眷本站的博文,我会延续发一些相同的文章帮您晋升程度,其它我最近规划和群里的几个Mootools喜爱者建造一下Mootools1.4的chm版中文API手册,假如您对此感乐趣可以来群里一路接头(QQ群号:16648471)
我们本日的课程首要讲授一下Mootools的class,由于Mootools的class凡是用于对插件的封装,以是讲完了class之后我会现实开拓一个插件并具体声名插件的开拓进程.
在Mootools中行使Class结构函数建设一个类有两种方法，也就是转达两种差异范例的参数给结构函数，第一种也是尺度方法转达一个工具字面量，这个工具字面量可以包罗你为类添加的全部属性、要领。譬喻：
var Person = new Class({
//初始化
initialize: function (name, age) {
this.name = name;
this.age = age;
},
//建设一个要领
log: function () {
console.log(this.name + ',' + this.age);
}
});
var mark = new Person('mark', 24);
mark.log(); // returns 'mark,24'
第二种是转达一个平凡函数，mootools会自动把这个函数包装成只含一个initialize键值的工具字面量，然后你可以行使implement要领对类举办扩展，譬喻：
var Person = new Class(function (name, age) {
this.name = name;
this.age = age;
});
Person.implement('log', function () {
console.log(this.name + ',' + this.age);
});
var mark = new Person('mark', 24);
mark.log(); // returns 'mark,24'
虽然保举行使的照旧第一种方法，直观明白。你假如行使尺度方法成立了一个类，也是可以行使implement和Extends对类举办扩展或担任，虽然了这部门内容已经超出了我们一周学会Mootools的领域,以是假如您对此感乐趣可以看官方文档.
接下来我会开拓一个插件,用来演示class的行使.这个插件的结果，请查察下边的文章：
http://www.veryhuo.com/a/view/42563.html
所差异的是,之前我是直接行使function实现的,而此刻是行使class封装过了,下边是实当代码.
<script style="text/javascript" src="http://www.veryhuo.com/uploads/common/js/mootools-yui-compressed.js"></script>
<body id='a'>
<h2 class='a'>Single images</h2>
<div id='bsfdimg' style='background:url("http://www.veryhuo.com/uploads/common/images/wall1.jpg") no-repeat scroll -50px -50px transparent;width:260px;height:200px;' w='392' h='600'></div>
<script type='text/javascript'>
var MoveBKimg=new Class({
initialize:function(){//初始化
this.$L=0;
this.$T=0;
},
Todo:function(i,opt){
this.opt={
bw:opt.bw || 0, //容器宽度
bh:opt.bh || 0,
iw:opt.iw || 0, //图像宽度
ih:opt.ih || 0,
X:opt.X || 0, //鼠标的clientX坐标
Y:opt.Y || 0
};o=this.opt;
if(!i || !o.iw || !o.ih || !o.bw || !o.bh){return false;}
o.iw=o.iw-o.bw; //图像现实可被移动的x轴范畴
o.ih=o.ih-o.bh;
var P=i.getStyle('background-position');P=P.split(" ");//取得今朝配景图的position值,并拆分转为Int型
P[0]=P[0].toInt();P[0]=(P[0].abs()>o.iw)?((P[0]<0)?-o.iw:o.iw):P[0];//配景图今朝的X偏移,并对值举办2次批改
P[1]=P[1].toInt();P[1]=(P[1].abs()>o.ih)?((P[1]<0)?-o.ih:o.ih):P[1];
console.log(o.X+'|'+o.Y);
if(o.X>this.$L){//往右移鼠标图片往左跑
this.$L=o.X;
P[0]=(o.iw<(P[0]-10))?o.iw:(P[0]-10);
}
if(o.X<this.$L){//往左移鼠标图片往右跑
this.$L=o.X;
P[0]=((P[0]+10)>0)?0:(P[0]+10);
}
if(o.Y>this.$T){//往下移鼠标图片往上跑
this.$T=o.Y;
P[1]=(o.ih<(P[1]-10))?o.ih:(P[1]-10);
}
if(o.Y<this.$T){//往上移鼠标图片往下跑
this.$T=o.Y;
P[1]=((P[1]+10)>0)?0:(P[1]+10);
}
i.setStyle('background-position',''+P[0]+'px '+P[1]+'px');//从头给配景图的position赋值
}
});
El=$('bsfdimg');//选择dom
var MoveBKimg=new MoveBKimg();//实例化class,在实例化的进程中会自动执行initialize,并建设两个变量赋值为0,这两个变量的浸染是和鼠标今朝的坐标做比对,这样才气知道鼠标是往什么偏向移动了
El.addEvent('mousemove',function(event){//给dom节点绑定变乱
//挪用类的Todo要领,挪用的时辰转达dom节点和options
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
})
我说一下这一句:
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
这里的El即为$('bsfdimg')
{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y}
这一句里的bw就是div容器的宽度,bh是div容器的高度,iw是图像的现实宽度,ih是图像的现实高度
图像的现实宽度和高度为了精确性以是我直接行使php取得并赋值的,虽然了,你也可以行使其他恣意你能想到的要领来取得图像宽度和高度.
X:event.client.x,Y:event.client.y
这两个体离是鼠标响应变乱的坐标,不必要修改.
event来自El.addEvent('mousemove',function(event){对变乱的绑按时的传值.
在跟从鼠标移动的配景图这篇文章内的结果是行使了function,并没有行使class封装,各人可以较量一下二者的差别.
好了,我们的一周学会Mootools1.4到此也该画一个句号了.
假如感受照旧有所不敷,保举你阅读一下下边的几篇文章信托会对你有所辅佐的
（文章来历：Seven的部落格） （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
