基于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 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 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执行速率优化技巧小结
2008/03/15 PHP
写出高质量的PHP程序
2012/02/04 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python的unittest测试类代码实例
2017/12/07 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
丑小鸭教学反思
2014/02/03 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
2014年图书室工作总结
2014/12/09 职场文书
地雷战观后感
2015/06/09 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS