基于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();
 
 
 

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

这个脚本必须在