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

效果预览如下:

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

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

复制代码 代码如下:

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

时间: 2024-10-24 01:21:29

基于mootools 1.3框架下的图片滑动效果代码_Mootools的相关文章

js带前后翻页的图片切换效果代码分享_javascript技巧

本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

基于JS快速实现导航下拉菜单动画效果附源码下载_javascript技巧

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

Jquery图片缩放效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

三款Jquery图片放大镜效果代码

本文章是利用了jquery图片放大镜效果插件来实例图片放大,下面我们收藏了三款效果的实例,看看那款适合你哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

jquery的幻灯片图片切换效果代码分享_jquery

本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

js钢琴按钮波浪式图片排列效果代码分享_javascript技巧

本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图:                                -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能

listView怎么实现图片滑动效果???????

问题描述 想请教下listView怎么实现图片滑动效果呀???? 解决方案 解决方案二:ASP走马灯么~解决方案三:异步无刷新水平滑动图片效果//java设置<scripttype="text/javascript"language="javascript">varprm=Sys.WebForms.PageRequestManager.getInstance();prm.add_initializeRequest(initializeRequest);p

PSD转HTML实例教程——利用JQuery插件实现图片滑动效果

之前一段时间,翻译了一些国外的PS网页设计教程,这些教程中都有一些共性,例如包含网页LOGO.导航菜单栏.图片滑动栏.版权信息等.其中在多个教程中都提到了利用JQuery插件实现图片滑动栏.于是在网上搜索了一番,发现类似的插件千千万万,都有各自的特色.故本教程挑选了其中的一个插件,进行讲解,并在后面结合实例讲解如何在PS中切片,在导出的网页中完成图片滑动栏栏的制作.   插件网址:http://slidesjs.com/ 插件示例网址:http://slidesjs.com/examples/s

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes