基于mootools1.3框架下的图片滑动

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[i].setStyle("left",i*this.aveWidth);   
} },   
start:function(){   
for(var i=0;i
this.triggers[i].set("tween",{property:"left",duration:300, fps:80});   
//为每个元素设置动画参数   
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));  
//绑定slider函数 }   
},   
slider:function(e,at){   
e.stop();   
for(var i=1;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(); 

如果想直接在本地运行,请引入

这个脚本必须在