这个js特效通过jQuery+css3实现了一个全屏的产品展示效果，范例中每屏展示一款手机，点击向前向后的按钮可以查看下一个产品，产品切换带有特效，非常酷。HTML框架： [code] <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title> <!-- Google Webfonts and our stylesheet --> <link rel="stylesheet" href="//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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="impress" class="impress-not-supported"> <!-- 幻灯片的代码就放在这里 --> </div> <a id="arrowLeft" class="arrow"><</a> <a id="arrowRight" class="arrow">></a> <!-- JavaScript includes --> <script src="//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> [/code] 幻灯片的html代码： [code] <!-- The first slide retains its default position. We could omit the data attributes --> <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 /> <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" /> </div> <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger --> <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..</p> <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" /> </div> <!-- Same for the rest.. --> <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.. </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 ..</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..</p> <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" /> </div> [/code] 用到的CSS样式： [code] /*---------------------------- Styling the presentation -----------------------------*/ #impress:not(.impress-not-supported) .step{ opacity:0.4; } #impress .step{ width:700px; height: 600px; position:relative; margin:0 auto; -moz-transition:1s opacity; -webkit-transition:1s opacity; transition:1s opacity; } #impress .step.active{ opacity:1; } #impress h2{ font: normal 44px/1.5 'PT Sans Narrow', sans-serif; color:#444648; position:absolute; z-index:10; } #impress p{ font: normal 18px/1.3 'Open Sans', sans-serif; color:#27333f; position:absolute; z-index:10; } #impress img{ position:absolute; z-index:1; } [/code] jQuery代码，这段js代码保存在script.js文件里面： [code] $(function(){ var imp = impress(); $('#arrowLeft').click(function(e){ imp.prev(); e.preventDefault(); }); $('#arrowRight').click(function(e){ imp.next(); e.preventDefault(); }); }); [/code]
