效果预览如下:
实现原理:
容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去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();
如果想直接在本地运行,请引入
这个脚本必须在后面，原因不解释！