效果预览如下:

实现原理:

容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去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(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();

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

这个脚本必须在

网友评论

文明上网理性发言，请遵守 新闻评论服务协议我要评论

立即提交

专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

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