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


Posted in Javascript onApril 22, 2011

效果预览如下:
基于mootools 1.3框架下的图片滑动效果代码
实现原理:
容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去left属性,用tween实现动画效果.

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

<div id="container"> 
<img src="//img.jbzj.com/file_images/article/201104/r_song1.jpg" alt="" /> 
<img src="//img.jbzj.com/file_images/article/201104/r_song2.jpg" alt="" /> 
<img src="//img.jbzj.com/file_images/article/201104/r_song3.jpg" alt="" /> 
<img src="//img.jbzj.com/file_images/article/201104/r_song4.jpg" alt="" /> 
<img src="//img.jbzj.com/file_images/article/201104/r_song5.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>后面,原因不解释!

Javascript 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 #Javascript
jQuery Ajax 实例全解析
Apr 20 #Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 #Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 #Javascript
编写自己的jQuery插件简单实现代码
Apr 19 #Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 #Javascript
分享20款好玩的jQuery游戏
Apr 17 #Javascript
You might like
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
js replace 全局替换的操作方法
2018/06/12 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
借名购房协议书范本
2014/10/06 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
cf战队宣传语
2015/07/13 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers