<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3实现的超酷全屏产品展示效果 - 脚本之家-www.jb51.net</title>
<meta name="Copyright" content="脚本之家 http://www.jb51.net/" />
<meta name="description" content="jQuery实现的超强全屏产品展示效果,JavaScript分享网" />
<meta content="jQuery实现的超强全屏产品展示效果,倒计时，JavaScript,分享,JavaScript代码" name="keywords" />
<style type="text/css">
<!--
body{FONT-SIZE: 14px;background-color:#fff}
-->
</style>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress" class="impress-not-supported">
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br /> 1.2 GHz Dual Core CPU<br /> 32 GB of storage<br /> Fast Camera</p>
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel to Android. Simple layouts with subtle animations and delightful flourishes make everything feel alive. </p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes it much easier to share them with family and friends.</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and fun. Store your entire collection for free, and stream your music to your Galaxy Nexus, computer, or other Android devices. <a href="http://www.jb51.net" target="_blank">jb51.net</a></p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
<footer>
<h2><i>Tutorial:</i> Impressive CSS3 Product Showcase</h2>
<a class="tzine" href="http://www.jb51.net">Head on to <i>Share<b>JS</b></i> to download this example</a>
<br><br>
<div style="text-align:center;width:100%">
<br><br>
获取更多JavaScript代码，请登录脚本之家 <a href="http://www.jb51.net">http://www.jb51.net</a>
<br>
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</footer>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/impress.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
jQuery+CSS3实现的超酷全屏产品切换展示效果.zip （11个子文件） 
132686958473841776 assets css 
styles.css 4KB img 
nexus_2.jpg 50KB nexus_4.jpg 56KB
arrows.png 2KB bg.jpg 2KB nexus_3.jpg 46KB nexus_1.jpg 32KB nexus_5.jpg 66KB js impress.js 14KB script.js 217B
index.html 4KB资源评论
