首頁 > 開發者 > JavaScript
jquery實現帶縮圖的可定製高度畫廊效果（5種），jquery可定製
本文執行個體講述了jquery可定製高度畫廊效果。分享給大家供大家參考。具體如下：
這是一款基於jquery可定製高度畫廊效果代碼，很有藝術感，帶有五種飛行展示效果，最大的特點是可以定製高度，是一款非常實用的特效代碼，值得大家學習。
運行： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery圖片滾動放大效果代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.ad-gallery.js"></script> <script type="text/javascript"> $(function() { $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...'); $('img.image1').data('ad-title', 'Title through $.data'); $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down'); $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down'); var galleries = $('.ad-gallery').adGallery(); $('#switch-effect').change( function() { galleries[0].settings.effect = $(this).val(); return false; } ); $('#toggle-slideshow').click( function() { galleries[0].slideshow.toggle(); return false; } ); $('#toggle-description').click( function() { if(!galleries[0].settings.description_wrapper) { galleries[0].settings.description_wrapper = $('#descriptions'); } else { galleries[0].settings.description_wrapper = false; } return false; } ); }); </script> <style type="text/css"> * { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; color: #333; line-height: 140%; } select, input, textarea { font-size: 1em; } body { padding: 30px; font-size: 70%; width: 1250px; } h2 { margin-top: 1.2em; margin-bottom: 0; padding: 0; border-bottom: 1px dotted #dedede; } h3 { margin-top: 1.2em; margin-bottom: 0; padding: 0; } .example { border: 1px solid #CCC; background: #f2f2f2; padding: 10px; } ul { list-style-image:url(list-style.gif); } pre { font-family: "Lucida Console", "Courier New", Verdana; border: 1px solid #CCC; background: #f2f2f2; padding: 10px; } code { font-family: "Lucida Console", "Courier New", Verdana; margin: 0; padding: 0; } #gallery { padding: 30px; background: #e1eef5; } #descriptions { position: relative; height: 50px; background: #EEE; margin-top: 10px; width: 640px; padding: 10px; overflow: hidden; } #descriptions .ad-image-description { position: absolute; } #descriptions .ad-image-description .ad-description-title { display: block; } </style> <title>jQuery畫廊</title></head><body><div align="center"> <div id="container"> <h1>jQuery畫廊外掛程式</h1> <p>一個高度可定製的畫廊jQuery外掛程式。</p> <div id="gallery" class="ad-gallery"> <div class="ad-image-wrapper"> </div> <div class="ad-controls"> </div> <div class="ad-nav"> <div class="ad-thumbs"> <ul class="ad-thumb-list"> <li> <a href="images/1.jpg"> <img src="images/thumbs/t1.jpg" class="image0"> </a> </li> <li> <a href="images/10.jpg"> <img src="images/thumbs/t10.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg" class="image1"> </a> </li> <li> <a href="images/11.jpg"> <img src="images/thumbs/t11.jpg" title="A title for 11.jpg" longdesc="http://coffeescripter.com" alt="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2"> </a> </li> <li> <a href="images/12.jpg"> <img src="images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3"> </a> </li> <li> <a href="images/13.jpg"> <img src="images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4"> </a> </li> <li> <a href="images/14.jpg"> <img src="images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5"> </a> </li> <li> <a href="images/2.jpg"> <img src="images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6"> </a> </li> <li> <a href="images/3.jpg"> <img src="images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7"> </a> </li> <li> <a href="images/4.jpg"> <img src="images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8"> </a> </li> <li> <a href="images/5.jpg"> <img src="images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9"> </a> </li> <li> <a href="images/6.jpg"> <img src="images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10"> </a> </li> <li> <a href="images/7.jpg"> <img src="images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg" class="image11"> </a> </li> <li> <a href="images/8.jpg"> <img src="images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg" class="image12"> </a> </li> <li> <a href="images/9.jpg"> <img src="images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg" class="image13"> </a> </li> </ul> </div> </div> </div> <p>選擇飛行效果：<select id="switch-effect"> <option value="slide-hori">水平滑動</option> <option value="slide-vert">垂直平滑</option> <option value="resize">收縮/伸長</option> <option value="fade">褪色效果</option> <option value="">無效果</option> </select><br> </p> </div><div style="text-align:center;clear:both"></body></html>
以上就是為大家分享的jquery可定製高度畫廊效果代碼，希望大家可以喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
