Image sliding effect code based on mootools 1.3 framework_Mootools

The effect preview is as follows:

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn