基于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 到 JQuery (1)学习小结
Feb 12 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
食品销售计划书
2014/04/26 职场文书
排查整治工作方案
2014/06/09 职场文书
业务内勤岗位职责
2015/04/13 职场文书
食品安全责任书范本
2015/05/09 职场文书
小学班主任心得体会
2016/01/07 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android