jquery动画2.元素坐标动画效果(创建一个图片走廊)


Posted in Javascript onAugust 24, 2012

效果预览图片:
jquery动画2.元素坐标动画效果(创建一个图片走廊)
大家可以下载demo看完整效果,下面介绍制作过程。

1.首先创建一个html页面,html结构如下:

<div id="slider"> 
<div id="viewer"> 
<img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> 
<img id="image2" src="img/atari.jpg" alt="Atari TT030" /> 
<img id="image3" src="img/commodore16.jpg" alt="Commodore 64" /> 
<img id="image4" src="img/commodore128.jpg" alt="Commodore 128" /> 
<img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX Spectrum +2" /> 
</div> 
<ul id="ui"> 
<li class="hidden" id="prev"><a href="" title="Previous">«</a></li> 
<li><a href="#image1" title="Image 1" class="active">Image 1</a></li> 
<li><a href="#image2" title="Image 2">Image 2</a></li> 
<li><a href="#image3" title="Image 3">Image 3</a></li> 
<li><a href="#image4" title="Image 4">Image 4</a></li> 
<li><a href="#image5" title="Image 5">Image 5</a></li> 
<li class="hidden" id="next"><a href="" title="Next">»</a></li> 
</ul> 
</div>

大家一看就明白,viewer包含了几张图片,ul对象里面包含了‘上一条'、‘下一条'和各个图片对应的导航。
2.接下来需要为这些html元素设置css样式,css我就不多说了,就是给viewer、图片等元素加样式,viewer同时只能显示一张图片:
#slider 
{ 
width: 500px; 
position: relative; 
} 
#viewer 
{ 
width: 400px; 
height: 300px; 
margin: auto; 
position: relative; 
overflow: hidden; 
} 
#slider ul 
{ 
width: 350px; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
#slider ul:after 
{ 
content: "."; 
visibility: hidden; 
display: block; 
height: 0; 
clear: both; 
} 
#slider li 
{ 
margin-right: 10px; 
float: left; 
} 
#prev, #next 
{ 
position: absolute; 
top: 175px; 
} 
#prev 
{ 
left: 20px; 
} 
#next 
{ 
position: absolute; 
right: 10px; 
} 
.hidden 
{ 
display: none; 
} 
#slide 
{ 
width: 2000px; 
height: 300px; 
position: absolute; 
top: 0; 
left: 0; 
} 
#slide img 
{ 
float: left; 
width: 400px; 
height: 300px; 
} 
#title 
{ 
margin: 0; 
text-align: center; 
}

3.为页面添加jquery和jquery.easing.1.3.js的引用。然后就是我们这篇的重头了,为导航编写相应的js事件。

首先我们需要创建一个新的div来包装5张图片。

$('#viewer').wrapInner('<div id="slide"></div>');

接下来我们使用jquery的selector找到slider,slide,prev,next等对象,把他们存到相应的js变量中。
var container = $('#slider'), 
prev = container.find('#prev'), 
prevChild = prev.find('a'), 
next = container.find('#next').removeClass('hidden'), 
nextChild = next.find('a'), 
slide = container.find('#slide')

创建两个新的js变量,key保存当前活动图片id,details保存所有图片各自的position和title信息。
key = "image1", 
details = { 
image1: { 
position: 0, 
title: slide.children().eq(0).attr('alt') 
}, 
image2: { 
position: -400, 
title: slide.children().eq(1).attr('alt') 
}, 
image3: { 
position: -800, 
title: slide.children().eq(2).attr('alt') 
}, 
image4: { 
position: -1200, 
title: slide.children().eq(3).attr('alt') 
}, 
image5: { 
position: -1600, 
title: slide.children().eq(4).attr('alt') 
} 
};

为了显示图片标题,我们需要添加一个h2标题到页面。
$('<h2>', { 
id: 'title', 

text: details[key].title 
}).prependTo('#slider');
 

上述工作完成后,就可以开始为a标签添加click事件了,这里的a标签分两种,一种是‘上一条'和‘下一条',另外一种是各图片对应的导航。我们需要分别为他们添加相应的click事件。但是他们都会使用到一个相同的回调函数,我们先完成回调函数的编写。代码思路我就直接以注释的方式完成。
function postAnim(dir) { 
//首先我们获取到当前活动图片的id,只包含数字部分 
var keyMath = parseInt(key.match(/\d+$/)); 

//slide的left小于0,也就是说当前活动图片不是图片1,‘上一条'导航显示;否则‘上一条'导航消失 
(parseInt(slide.css('left')) < 0) ? prev.show() : prev.hide(); 

//slide的left等于-1600,也就是说当前活动图片是第五章,‘下一条'导航消失,否则‘下一条'导航显示 
(parseInt(slide.css('left')) === -1600) ? next.hide() : next.show(); 

 

//if条件语句当使用‘上一条'和‘下一条'导航时才有意义。实现的功能就是点‘上一条'是key减一,点‘下一条'key加1 
if (dir) { 
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath + 1; 
key = 'image' + titleKey; 
} 

//重新设置h2标题 
container.find('#title').text(details[key].title); 

//重新设置当前哪个图片为活动状态 
container.find('.active').removeClass('active'); 
container.find('a[href=#' + key + ']').addClass('active'); 
}

接下来我们完成‘上一条'和‘下一条'导航的功能。
nextChild.add(prevChild).click(function (e) { 
//阻止默认事件,否则动画效果就没有了 
e.preventDefault(); 
var arrow = $(this).parent(); 

//当前slide没有动画时,我们才添加新的动画效果 

if (!slide.is(':animated')) { 
slide.animate({ 
left: (arrow.attr('id') === 'prev') ? '+=400' : '-=400' 
}, 'slow', 'easeOutBack', function () { 
(arrow.attr("id") === "prev") ? postAnim("back") : postAnim("forward"); 
}); 
} 
});

最后是图片对应的各自导航的功能实现。
$('#ui li a').not(prevChild).not(nextChild).click(function (e) { 
//阻止默认事件 
e.preventDefault(); 

//获取当前活动图片id 
key = $(this).attr('href').split('#')[1]; 
//设置动画效果 

slide.animate({ 
left: details[key].position 
}, 'slow', 'easeOutBack', postAnim); 
});

本课的内容完毕了,大家可以下载demo,查看功能具体是如下实现的。

demo下载地址:jQuery.animation.position

Javascript 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
jquery动画1.加载指示器
Aug 24 #Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 #Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 #Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 #Javascript
javascript动态加载三
Aug 22 #Javascript
javascript动态加载二
Aug 22 #Javascript
javascript动态加载实现方法一
Aug 22 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
js 走马灯简单实例
2013/11/21 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python3.6编写的单元测试示例
2019/08/17 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python 解析xml文件的示例
2020/09/29 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
计划生育工作汇报
2014/10/28 职场文书
毕业典礼致辞
2015/07/29 职场文书