recherche

Maison >interface Web >js tutoriel >jquery implémente des effets de galerie de hauteur personnalisables avec des vignettes (5 types)_jquery

jquery implémente des effets de galerie de hauteur personnalisables avec des vignettes (5 types)_jquery

WBOY
WBOYoriginal
2016-05-16 15:41:521161parcourir

L'exemple de cet article décrit l'effet de galerie de hauteur personnalisable de jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code d'effet de galerie de hauteur personnalisable basé sur jquery. Il est très artistique et est livré avec cinq effets d'affichage de vol. La plus grande caractéristique est que la hauteur peut être personnalisée. Il s'agit d'un code d'effets spéciaux très pratique qui mérite d'être appris.
运行效果图：                             -------------------查看效果 下载源码----------- ---------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet de défilement et de zoom d'image jquery partagé avec vous est le suivant 

<!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&#63;</em> That aint what HTML stands for&#63; 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>

Ce qui précède est le code d'effet de galerie de hauteur personnalisable jquery partagé avec vous, j'espère qu'il vous plaira.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémente un code d'effet de navigation qui affiche les compétences status_javascript actuellesArticle suivant：js implémente un code d'effet de navigation qui affiche les compétences status_javascript actuelles

Articles Liés

Voir plus