快捷導(dǎo)航

基于mootools 1.3框架下的圖片滑動(dòng)效果代碼

更新時(shí)間：2011年04月22日 01:27:26 作者：

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

效果預(yù)覽如下:

實(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)代碼封裝

復(fù)制代碼代碼如下:

 
<div id="container"> 
<img src="http://img.jbzj.com/file_images/article/201104/r_song1.jpg" alt="" /> 
<img src="http://img.jbzj.com/file_images/article/201104/r_song2.jpg" alt="" /> 
<img src="http://img.jbzj.com/file_images/article/201104/r_song3.jpg" alt="" /> 
<img src="http://img.jbzj.com/file_images/article/201104/r_song4.jpg" alt="" /> 
<img src="http://img.jbzj.com/file_images/article/201104/r_song5.jpg" alt="" /> 
</div> 

CSS樣式

復(fù)制代碼代碼如下:

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

JS:picSlider類

復(fù)制代碼代碼如下:

 
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)行,請引入
<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>后面，原因不解釋！