一周学会Mootools 1.4中文教程:(7)汇总收尾
轉(zhuǎn)眼之間已經(jīng)第七課了,這也將成為最后一課,如果這7課下來(lái)您感覺(jué)水平?jīng)]有達(dá)到預(yù)想的水平,沒(méi)關(guān)系您可以繼續(xù)關(guān)注本站的博文,我會(huì)陸續(xù)發(fā)一些類似的文章幫您提升水平,另外我最近打算和群里的幾個(gè)Mootools愛(ài)好者制作一下Mootools1.4的chm版中文API手冊(cè),如果您對(duì)此感興趣可以來(lái)群里一起討論(QQ群號(hào):16648471)
我們今天的課程主要講解一下Mootools的class,因?yàn)镸ootools的class通常用于對(duì)插件的封裝,所以講完了class之后我會(huì)實(shí)際開(kāi)發(fā)一個(gè)插件并詳細(xì)說(shuō)明插件的開(kāi)發(fā)過(guò)程.
在Mootools中使用Class構(gòu)造函數(shù)創(chuàng)建一個(gè)類有兩種方式，也就是傳遞兩種不同類型的參數(shù)給構(gòu)造函數(shù)，第一種也是標(biāo)準(zhǔn)方式傳遞一個(gè)對(duì)象字面量，這個(gè)對(duì)象字面量可以包括你為類添加的所有屬性、方法。例如：
//初始化
initialize: function (name, age) {
this.name = name;
this.age = age;
},
//創(chuàng)建一個(gè)方法
log: function () {
console.log(this.name + ',' + this.age);
}
});
var mark = new Person('mark', 24);
mark.log(); // returns 'mark,24'
?
第二種是傳遞一個(gè)普通函數(shù)，mootools會(huì)自動(dòng)把這個(gè)函數(shù)包裝成只含一個(gè)initialize鍵值的對(duì)象字面量，然后你可以使用implement方法對(duì)類進(jìn)行擴(kuò)展，例如：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' ?
當(dāng)然推薦使用的還是第一種方式，直觀明了。你如果使用標(biāo)準(zhǔn)方式建立了一個(gè)類，也是可以使用implement和Extends對(duì)類進(jìn)行擴(kuò)展或繼承，當(dāng)然了這部分內(nèi)容已經(jīng)超出了我們一周學(xué)會(huì)Mootools的范疇,所以如果您對(duì)此感興趣可以看官方文檔.
接下來(lái)我會(huì)開(kāi)發(fā)一個(gè)插件,用來(lái)演示class的使用.這個(gè)插件的效果是:http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
所不同的是,之前我是直接使用function實(shí)現(xiàn)的,而現(xiàn)在是使用class封裝過(guò)了,下邊是實(shí)現(xiàn)代碼.
<body id='a'>
<h2 class='a'>Single images</h2>
<div id='bsfdimg' style='background:url("http://www.eg-live.com.tw/@upload/2182/07_7e4cb.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, //鼠標(biāo)的clientX坐標(biāo)
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; //圖像實(shí)際可被移動(dòng)的x軸范圍
o.ih=o.ih-o.bh;
var P=i.getStyle('background-position');P=P.split(" ");//取得目前背景圖的position值,并拆分轉(zhuǎn)為Int型
P[0]=P[0].toInt();P[0]=(P[0].abs()>o.iw)?((P[0]<0)?-o.iw:o.iw):P[0];//背景圖目前的X偏移,并對(duì)值進(jìn)行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){//往右移鼠標(biāo)圖片往左跑
this.$L=o.X;
P[0]=(o.iw<(P[0]-10))?o.iw:(P[0]-10);
}
if(o.X<this.$L){//往左移鼠標(biāo)圖片往右跑
this.$L=o.X;
P[0]=((P[0]+10)>0)?0:(P[0]+10);
}
if(o.Y>this.$T){//往下移鼠標(biāo)圖片往上跑
this.$T=o.Y;
P[1]=(o.ih<(P[1]-10))?o.ih:(P[1]-10);
}
if(o.Y<this.$T){//往上移鼠標(biāo)圖片往下跑
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();//實(shí)例化class,在實(shí)例化的過(guò)程中會(huì)自動(dòng)執(zhí)行initialize,并創(chuàng)建兩個(gè)變量賦值為0,這兩個(gè)變量的作用是和鼠標(biāo)目前的坐標(biāo)做比對(duì),這樣才能知道鼠標(biāo)是往什么方向移動(dòng)了
El.addEvent('mousemove',function(event){//給dom節(jié)點(diǎn)綁定事件
//調(diào)用類的Todo方法,調(diào)用的時(shí)候傳遞dom節(jié)點(diǎn)和options
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
})
我說(shuō)一下這一句:
這里的El即為$('bsfdimg')
{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y}這一句里的bw就是div容器的寬度,bh是div容器的高度,iw是圖像的實(shí)際寬度,ih是圖像的實(shí)際高度
圖像的實(shí)際寬度和高度為了準(zhǔn)確性所以我直接使用php取得并賦值的,當(dāng)然了,你也可以使用其他任意你能想到的方法來(lái)取得圖像寬度和高度. X:event.client.x,Y:event.client.y
這兩個(gè)分別是鼠標(biāo)相應(yīng)事件的坐標(biāo),不需要修改.
event來(lái)自El.addEvent('mousemove',function(event){對(duì)事件的綁定時(shí)的傳值.
http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
在上邊這篇文章內(nèi)的效果是使用了function,并沒(méi)有使用class封裝,大家可以比較一下二者的差異.
好了,我們的一周學(xué)會(huì)Mootools1.4到此也該畫(huà)一個(gè)句號(hào)了.
如果感覺(jué)還是有所不足,推薦你閱讀一下下邊的幾篇文章相信會(huì)對(duì)你有所幫助的
轉(zhuǎn)載于:https://www.cnblogs.com/GaoAnLee/p/5368805.html
總結(jié)
以上是生活随笔為你收集整理的一周学会Mootools 1.4中文教程:(7)汇总收尾的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
