Frequently used picture plugin demonstrates jquery 10 different toggle Picture List animation effect
Online Demo
Instance Code
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
<!DOCTYPE html>
"en"
class
=
"no-js"
>
<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>
<body>
<div
class
=
"container"
>
<!-- Top Navigation -->
for
Thumbnail Grids
<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>
<section
class
=
"tt-grid-wrapper"
>
<ul
class
=
"tt-grid tt-effect-fall tt-effect-delay"
>
<li><a href=
"#"
> "img/1.jpg"
alt=
"img1"
/></a></li>
<li><a href=
"#"
> "img/2.jpg"
alt=
"img2"
/></a></li>
<li><a href=
"#"
> "img/3.jpg"
alt=
"img3"
/></a></li>
<li><a href=
"#"
> "img/4.jpg"
alt=
"img4"
/></a></li>
<li><a href=
"#"
> "img/5.jpg"
alt=
"img5"
/></a></li>
<li><a href=
"#"
> "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>
Reprint: http://www.cnblogs.com/niuboren/p/6092344.html
|
jquery Demo 10 different toggle Picture List animation effects