特效描述:基于jQuery实现 3D焦点广告,基于jQuery实现3D焦点广告
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
2. 引入JS
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.gallery.js"></script>
3. HTML代码
<div class="container"> <!-- Codrops top bar --> <div class="codrops-top"> <span class="right"> </span> <div class="clr"></div> </div><!--/ Codrops top bar --> <header> <h1>3D Gallery <span>with CSS3 & jQuery</span></h1> <nav class="codrops-demos"> <a class="current-demo" href="index.html">Navigation</a> <a href="index2.html">Auto-Slideshow</a> <a href="index3.html">3 Elements</a> </nav> </header> <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a> <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a> <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a> <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a> <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a> <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a> <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a> <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a> <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a> <a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a> <a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a> <a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a> </div> <nav> <span class="dg-prev"><</span> <span class="dg-next">></span> </nav> </section> </div> <script type="text/javascript"> $(function() { $('#dg-container').gallery(); }); </script/>