jquery实现带缩略图的可定制高度画廊效果（5种）

本文实例讲述了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可定制高度画廊效果代码，希望大家可以喜欢。