Image sliding effect code based on mootools 1.3 framework

Image sliding effect code based on mootools 1.3 framework_Mootools

WBOY

Release： 2016-05-16 18:07:32

Original

1277 people have browsed it

The effect preview is as follows:
Image sliding effect code based on mootools 1.3 framework_Mootools
Implementation principle:
The container uses relative positioning, and the picture uses absolute positioning. When the mouse moves to the corresponding picture, change the left attribute and use tween to achieve the animation effect.

Code analysis: Write a picSlider class to implement code encapsulation

Copy the code The code is as follows:

CSS style

Copy code The code is as follows:

 
 #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 class

Copy code The code is as follows:

 
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(); //Initialize image display 
this.start(); 
}, 
setImgsInit:function(){ 
for(var i=0;ithis.triggers[i].setStyle("left",i*this.aveWidth); 
} 
}, 
start:function(){ 
for(var i=0; ithis.triggers[i].set("tween",{property:"left",duration:300, fps:80}); //For each element Set animation parameters 
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));//Bind slider function
} 
}, 
slider:function(e,at){ 
e.stop(); 
for(var i=1;iif(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(); 

If you want to run it directly locally, please introduce

This script must be in

< ;div> Behind, the reason is not explained!