MooTools是一個(gè)簡(jiǎn)潔，模塊化，面向?qū)ο蟮拈_源JavaScript web應(yīng)用框架。它為web開發(fā)者提供了一個(gè)跨瀏覽器js解決方案。在處理js css html時(shí)候。它提供了一個(gè)比普通js更面向?qū)ο蟮膁ocument API。

效果預(yù)覽如下:

[[22994]]

實(shí)現(xiàn)原理:

容器采用相對(duì)定位,圖片采用絕對(duì)定位,當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的圖片上,改變?nèi)eft屬性,用tween實(shí)現(xiàn)動(dòng)畫效果.

代碼分析:寫一個(gè)picSlider類實(shí)現(xiàn)代碼封裝

<div id="container">          
<img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="" />          
<img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="" />          
<img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="" />          
<img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="" />          
<img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="" />      
</div> 

CSS樣式

#container{width:459px; height:200px; backgroundcolor:Black;position:relative;overflow:hidden;  
#container img{position:absolute;width:360px;height:300px;display:block;top:0;width:280px;height:200px;} 

JS:picSlider類

var picSlider = new Class(  
{   
Implements: Options, options:   
{   
container: "container", imgsWidth: 0.6,   
},   
initialize: function (options)   
{   
this.setOptions(options);   
this.container = $(this.options.container); this.triggers = this.container.getElementsByTagName  
("img");   
this.containerWidth = this.container.getSize().x;   
//get container's width this.imgWidth = this.containerWidth * this.options.imgsWidth; this.aveWidth = this.containerWidth   
/ this.triggers.length; this.newAveWidth = (this.containerWidth - this.imgWidth)   
/ (this.triggers.length - 1); this.setImgsInit();   
//初始化圖片展示 this.start(); },   
setImgsInit:function(){   
for(var i=0;i<this.triggers.length;i++)  
{   
this.triggers[i].setStyle("left",i*this.aveWidth);   
} },   
start:function(){   
for(var i=0;i<this.triggers.length;i++){   
this.triggers[i].set("tween",{property:"left",duration:300, fps:80});   
//為每個(gè)元素設(shè)置動(dòng)畫參數(shù)   
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));  
//綁定slider函數(shù) }   
},   
slider:function(e,at){   
e.stop();   
for(var i=1;i<this.triggers.length;i++){   
if(i<=at){   
this.triggers[i].get("tween").start(i*this.newAveWidth);   
}else{   
this.triggers[i].get("tween").start(this.imgWidth+(i-1)*this.newAveWidth);   
} } }});  
new picSlider(); 

如果想直接在本地運(yùn)行,請(qǐng)引入

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script><script type="text/javascript" src="home.js"></script> 

這個(gè)腳本必須在<div><div>后面，原因不解釋！

請(qǐng)問哪位朋友知道怎么在效果預(yù)覽里面引入JS框架，好像不支持！有知道的嗎？

【編輯推薦】
 

1. 4.4.5　Mootools
2. mooTools和moo.fx
3. MooTools團(tuán)隊(duì)成員：我們?yōu)楹螐?qiáng)于jQuery
4. JavaScript web應(yīng)用框架Mootools 1.2.1發(fā)布