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

前端技术 2023/09/08 JavaScript

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

本文地址：https://www.stayed.cn/item/21874

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案