time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 基于mootools1.3框架下的图片滑动

基于mootools1.3框架下的图片滑动

时间:2011-04-21 22:35 点击:874次 字体:[ ]




效果预览如下:
 

基于mootools1.3框架下的图片滑动_www.fengfly.com 基于mootools1.3框架下的图片滑动_www.fengfly.com 基于mootools1.3框架下的图片滑动_www.fengfly.com 基于mootools1.3框架下的图片滑动_www.fengfly.com 基于mootools1.3框架下的图片滑动_www.fengfly.com


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

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

<div id="container">
<img src="/uploads/allimg/2011/04/21/2239294F4-0.jpg" alt="" />
<img src="/uploads/allimg/2011/04/21/223929DS-1.jpg" alt="" />
<img src="/uploads/allimg/2011/04/21/2239293010-2.jpg" alt="" />
<img src="/uploads/allimg/2011/04/21/2239294354-3.jpg" alt="" />
<img src="/uploads/allimg/2011/04/21/2239291100-4.jpg" alt="" />
</div>

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;i<this.triggers.length;i++){
this.triggers[i].setStyle("left",i*this.aveWidth);
}
},
start:
function(){
for(var i=0;i<this.triggers.length;i++){
this.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;i<this.triggers.length;i++){
if(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();

如果想直接在本地运行,请引入
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
 <script type="text/javascript" src="home.js"></script>这个脚本必须在<div><div>后面,原因不解释!
 



本文地址 : http://www.fengfly.com/plus/view-198031-1.html
标签: mootools 图片滑动
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: