本文实例讲述了jquery可定制高度画廊效果。分享给大家供大家参考。具体如下：
这是一款基于jquery可定制高度画廊效果代码，很有艺术感，带有五种飞行展示效果，最大的特点是可以定制高度，是一款非常实用的特效代码，值得大家学习。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery图片滚动放大效果代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link type="text/css" href="https://www.jb51.net/jquery.ad-gallery.css"> <script type="text/javascript" src="https://www.jb51.net/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/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> <div> <h1>jQuery画廊插件</h1> <p>一个高度可定制的画廊jQuery插件。</p> <div> <div> </div> <div> </div> <div> <div> <ul> <li> <a href="https://www.jb51.net/images/1.jpg"> <img src="https://www.jb51.net/images/thumbs/t1.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/10.jpg"> <img src="https://www.jb51.net/images/thumbs/t10.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/11.jpg"> <img src="https://www.jb51.net/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"> </a> </li> <li> <a href="https://www.jb51.net/images/12.jpg"> <img src="https://www.jb51.net/images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/13.jpg"> <img src="https://www.jb51.net/images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/14.jpg"> <img src="https://www.jb51.net/images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/2.jpg"> <img src="https://www.jb51.net/images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/3.jpg"> <img src="https://www.jb51.net/images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/4.jpg"> <img src="https://www.jb51.net/images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/5.jpg"> <img src="https://www.jb51.net/images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/6.jpg"> <img src="https://www.jb51.net/images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/7.jpg"> <img src="https://www.jb51.net/images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/8.jpg"> <img src="https://www.jb51.net/images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg"> </a> </li> <li> <a href="https://www.jb51.net/images/9.jpg"> <img src="https://www.jb51.net/images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg"> </a> </li> </ul> </div> </div> </div> <p>选择飞行效果：<select> <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> </body> </html>
以上就是为大家分享的jquery可定制高度画廊效果代码，希望大家可以喜欢。
您可能感兴趣的文章: