基于mootools 1.3框架下的图片滑动效果代码_Mootools

程序员文章站 2022-04-08 19:30:35

...

效果预览如下:

实现原理:
容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去left属性,用tween实现动画效果.

代码分析:写一个picSlider类实现代码封装

复制代码代码如下:

CSS样式

复制代码代码如下:

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

复制代码代码如下:

 
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;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}); //为每个元素设置动画参数 
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));//绑定slider函数 
} 
}, 
slider:function(e,at){ 
e.stop(); 
for(var i=1;iif(ithis.triggers[i].get("tween").start(i*this.newAveWidth); 
}else{ 
this.triggers[i].get("tween").start(this.imgWidth+(i-1)*this.newAveWidth); 
} 
} 
} 
}); 
new picSlider(); 

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

这个脚本必须在

后面，原因不解释！

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐

独孤九贱-php全栈开发教程
全栈 170W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程
入门 80W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程
实战 120W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习