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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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的5个安全措施小结
2012/07/17 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python-for循环的内部机制
2020/06/12 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
意向协议书
2015/01/27 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript