经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果




实例代码下载

Java代码

<!DOCTYPEhtml>

<htmllang="en"class="no-js">

<head>

<metacharset="UTF-8"/>

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

<metaname="viewport"content="width=device-width,initial-scale=1.0"/>

<title>jQuery十种不同的切换图片列表动画效果</title>

<metaname="description"content="AnimationsforThumbnailGrids:TransitionInspirationforThumbnailGrids"/>

<metaname="keywords"content="animation,thumbnail,grid,css,inspiration,transition,effect,webdesign"/>

<linkrel="stylesheet"type="text/css"href="css/demo.css"/>

<linkrel="stylesheet"type="text/css"href="css/component.css"/>

<scriptsrc="js/modernizr.custom.js"></script>

</head>

<body>

<divclass="container">

<!--TopNavigation-->

<header>

<h2>AnimationsforThumbnailGrids</h2>

<navclass="sucaihuo-demos">

<aclass="current-demo"href="index.html">Fall</a>

<ahref="index2.html">Slide</a>

<ahref="index3.html">RotateFall</a>

<ahref="index4.html">RotateScale</a>

<ahref="index5.html">Stack</a>

<ahref="index6.html">3dFlip</a>

<ahref="index7.html">Bringback</a>

<ahref="index8.html">Superscale</a>

<ahref="index9.html">CenterFlip</a>

<ahref="index10.html">FrontRow</a>

</nav>下载

</header>

<sectionclass="tt-grid-wrapper">

<ulclass="tt-gridtt-effect-falltt-effect-delay">

<li><ahref="#"><imgsrc="img/1.jpg"alt="img1"/></a></li>

<li><ahref="#"><imgsrc="img/2.jpg"alt="img2"/></a></li>

<li><ahref="#"><imgsrc="img/3.jpg"alt="img3"/></a></li>

<li><ahref="#"><imgsrc="img/4.jpg"alt="img4"/></a></li>

<li><ahref="#"><imgsrc="img/5.jpg"alt="img5"/></a></li>

<li><ahref="#"><imgsrc="img/6.jpg"alt="img6"/></a></li>

</ul>

<nav>

<aclass="tt-current"></a><a></a><a></a><a></a>

</nav>

</section>

</div><!--/container-->

<scriptsrc="js/classie.js"></script>

<scriptsrc="js/thumbnailGridEffects.js"></script>

<scripttype="text/javascript"src="/static/js/home.js"></script>

</body>

</html>