特效描述:jquery 响应式布局 图片滚动 手机端触屏滚动。jquery书架式图片展示特效,如图
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/sti_style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/mediaelementplayer.css">
2. 引入JS
<script src="js/jquery-1.7.min.js"></script> <script src="js/jquery.touchSwipe.min.js"></script> <script src="js/jquery.versatileTouchSlider.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script>
3. HTML代码
<div class="sti_container" id="ex_shelf_full" style="margin-top:50px;"> <div class="sti_slider"> <div class="sti_items"> <!-- SLIDE GROUP 1 --> <div class="sti_slide"> <div class="sti_shelf_divider"></div> <div class="sti_prod"> <img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h1.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Lamborghini Aventador"></a> </div> <div class="sti_prod"> <img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h2.jpg" class="link video sti_lightbox" data-type="video-youtube" data-size="700x420" title="Youtube Video (For The Birds / PIXAR)"></a> <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h3.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a> <a href="#" class="ribbon ribbon_red" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h4.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a> <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h5.jpg" class="link video sti_lightbox" data-type="video" data-size="540x303" title="MP4 Video. HTML5 Support / Flash Fallback"></a> <a href="#" class="ribbon ribbon_orange" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/h1.jpg" class="link zoom sti_lightbox" data-type="image" title="Lightbox image example"></a> <a href="#" class="ribbon ribbon_blue" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> <a href="http://www.kaiwo123.com/ad/v1.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example 2. HTML5 Support / Flash Fallback"></a> </div> <div class="sti_shelf_divider_bottom"></div> </div> <!-- SLIDE GROUP 2 --> <div class="sti_slide"> <div class="sti_shelf_divider"></div> <div class="sti_prod"> <img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> <a href="#" class="link more" title="Title"></a> </div> <div class="sti_prod"> <img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> <a href="content/audio/AirReview-Landmarks-02-ChasingCorporate.mp3" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a> <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150"> <a href="#" class="link more" title="Title"></a> </div> <div class="sti_prod"> <img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150"> <a href="http://vimeo.com/53327926" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a> </div> <div class="sti_prod"> <img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150"> <a href="content/html/html_content.html" class="link content sti_lightbox" data-type="html-content" data-size="550x450" title="HTML Content"></a> </div> <div class="sti_prod"> <img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> <a href="#" class="link more" title="Title"></a> <a href="#" class="ribbon ribbon_red" title="Ribbon"></a> </div> <div class="sti_prod"> <img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> <a href="#" class="link more" title="Title"></a> </div> <div class="sti_shelf_divider_bottom"></div> </div> <!-- SLIDE GROUP 3 --> </div><!-- sti_items --> </div><!-- sti_slider --> <div class="sti_paginate"> <div class="sti_page"></div> <div class="sti_control"> <a href="#" class="sti_btn sti_play"><img src="img/play.png" alt=""></a> <a href="#" class="sti_btn sti_pause"><img src="img/pause.png" alt=""></a> </div> </div> </div><!-- sti_container -->