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计算时间差函数
Oct 28 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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入门基础之php代码写法
2011/12/30 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Django自定义认证方式用法示例
2017/06/23 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
pytorch 共享参数的示例
2019/08/17 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
什么是封装
2013/03/26 面试题
超市总经理岗位职责
2014/02/02 职场文书
奠基仪式主持词
2014/03/20 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
购房委托书
2014/10/15 职场文书
单位考核聘任报告
2015/03/02 职场文书