经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果
实例代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang=
"en"
class
=
"no-js"
>
<head>
<meta charset=
"UTF-8"
/>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
/>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<title>jQuery十种不同的切换图片列表动画效果</title>
<meta name=
"description"
content=
"Animations for Thumbnail Grids: Transition Inspiration for Thumbnail Grids"
/>
<meta name=
"keywords"
content=
"animation, thumbnail, grid, css, inspiration, transition, effect, web design"
/>
<link rel=
"stylesheet"
type=
"text/css"
href=
"css/demo.css"
/>
<link rel=
"stylesheet"
type=
"text/css"
href=
"css/component.css"
/>
<script src=
"js/modernizr.custom.js"
></script>
</head>
<body>
<div
class
=
"container"
>
<!-- Top Navigation -->
<header>
<h1>Animations
for
Thumbnail Grids</h1>
<nav
class
=
"sucaihuo-demos"
>
<a
class
=
"current-demo"
href=
"index.html"
>Fall</a>
<a href=
"index2.html"
>Slide</a>
<a href=
"index3.html"
>Rotate Fall</a>
<a href=
"index4.html"
>Rotate Scale</a>
<a href=
"index5.html"
>Stack</a>
<a href=
"index6.html"
>3d Flip</a>
<a href=
"index7.html"
>Bring back</a>
<a href=
"index8.html"
>Superscale</a>
<a href=
"index9.html"
>Center Flip</a>
<a href=
"index10.html"
>Front Row</a>
</nav>
</header>
<section
class
=
"tt-grid-wrapper"
>
<ul
class
=
"tt-grid tt-effect-fall tt-effect-delay"
>
<li><a href=
"#"
><img src=
"img/1.jpg"
alt=
"img1"
/></a></li>
<li><a href=
"#"
><img src=
"img/2.jpg"
alt=
"img2"
/></a></li>
<li><a href=
"#"
><img src=
"img/3.jpg"
alt=
"img3"
/></a></li>
<li><a href=
"#"
><img src=
"img/4.jpg"
alt=
"img4"
/></a></li>
<li><a href=
"#"
><img src=
"img/5.jpg"
alt=
"img5"
/></a></li>
<li><a href=
"#"
><img src=
"img/6.jpg"
alt=
"img6"
/></a></li>
</ul>
<nav>
<a
class
=
"tt-current"
></a><a></a><a></a><a></a>
</nav>
</section>
</div><!-- /container -->
<script src=
"js/classie.js"
></script>
<script src=
"js/thumbnailGridEffects.js"
></script>
<script type=
"text/javascript"
src=
"/static/js/home.js"
></script>
</body>
</html>
转载：http://www.cnblogs.com/niuboren/p/6092344.html
|