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

标签:游戏玩法    日期:2018-03-05 13:08    录入:汇盛国际平台    浏览:

  

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

  效果预览图片:  
  
大家可以下载demo看完整效果,下面介绍制作过程。

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

  
  
  
Amstrad CPC 472  
Atari TT030  
Commodore 64  
Commodore 128  
Sinclair ZX Spectrum +2  
  
      
      
  • Image 1
  •   
  • Image 2
  •   
  • Image 3
  •   
  • Image 4
  •   
  • Image 5
  •   
      
  
  
  
大家一看就明白,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('
');  
  
接下来我们使用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标题到页面。

  
代码如下:

  
$('

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

  
上述工作完成后,就可以开始为a标签添加click事件了,这里的a标签分两种,一种是‘上一条'和‘下一条',另外一种是各图片对应的导航。我们需要分别为他们添加相应的click事件。但是他们都会使用到一个相同的回调函数,我们先完成回调函数的编写。代码思路我就直接以注释的方式完成。 ★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
上一篇:汇盛国际注册:jquery插件之文字间歇自动向上滚动
下一篇:Jquery中删除元素的实现代码
相关文章阅读
点击右上角的分享按钮即可收藏汇盛国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行