jQuery erkennt, dass durch Klicken auf das kleine Bild der große Bildcode „sharing_jquery' angezeigt wird-js-Tutorial-php.cn

jQuery erkennt, dass durch Klicken auf das kleine Bild der große Bildcode „sharing_jquery' angezeigt wird

WBOY

Freigeben： 2016-05-16 15:43:03

Original

1157 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Effekts, wenn man auf ein kleines Bild klickt, um ein großes Bild anzuzeigen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein auf jQuery basierender Code, mit dem Sie auf ein kleines Bild klicken können, um ein größeres Bild anzuzeigen. Er eignet sich für die Verwendung in der Produktanzeige und für andere Aspekte, um Benutzern das Durchsuchen von Produktdetails zu erleichtern.
Vorgangsrendering: ----------Effekt anzeigen------------- --- -------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit allen geteilte jQuery-Code, um den Effekt des Klickens auf ein kleines Bild zur Anzeige eines großen Bildes zu realisieren, lautet wie folgt

<head>
 
 <title>jQuery实现点击小图显示大图效果</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
 <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
 <script type="text/javascript" src="js/pngobject.js"></script>
 <link rel="stylesheet" href="style/style.css" type="text/css" />
 <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" />
 <script type="text/javascript">
 $(document).ready(function() {
  /*
  *  Examples - images
  */

  $("a#example1").fancybox({
  'titleShow' : false
  });

  $("a#example2").fancybox({
  'titleShow' : false,
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic'
  });

  $("a#example3").fancybox({
  'titleShow' : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });

  $("a#example4").fancybox();

  $("a#example5").fancybox({
  'titlePosition' : 'inside'
  });

  $("a#example6").fancybox({
  'titlePosition' : 'over'
  });

  $("a[rel=example_group]").fancybox({
  'transitionIn' : 'none',
  'transitionOut' : 'none',
  'titlePosition' : 'over',
  'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length &#63; '   ' + title : '') + '</span>';
  }
  });

  /*
  *  Examples - various
  */

  $("#various1").fancybox({
  'titlePosition' : 'inside',
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });

  $("#various2").fancybox();

  $("#various3").fancybox({
  'width'  : '75%',
  'height'  : '75%',
  'autoScale'  : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none',
  'type'  : 'iframe'
  });

  $("#various4").fancybox({
  'padding'  : 0,
  'autoScale'  : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });
 });
 </script>
</head>
<body>

<div id="content">
 <h4>jQuery 实现点击小图显示大图</h4>
 <p>
 <a rel="example_group" href="example/11.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/1.jpg" /></a>

 <a rel="example_group" href="example/22.jpg" title=""><img alt="" src="example/2.jpg" /></a>

 <a rel="example_group" href="example/44.jpg" title=""><img alt="" src="example/4.jpg" /></a>
 </p>
 <p>
 <a rel="example_group" href="example/33.jpg" title=""><img alt="" src="example/3.jpg" /></a>

 <a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg" /></a>

 <a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg" /></a>
 </p>
</div>
<div><p> </p></div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der mit Ihnen geteilte jQuery-Code, um den Effekt zu realisieren, der entsteht, wenn Sie auf ein kleines Bild klicken, um ein großes Bild anzuzeigen. Ich hoffe, es gefällt Ihnen.