jQuery は小さな画像をクリックすると大きな画像が表示されることを実現します。-jsチュートリアル-php.cn

jQuery は小さな画像をクリックすると大きな画像が表示されることを実現します。

WBOY

リリース： 2016-05-16 15:43:03

オリジナル

1158 人が閲覧しました

この記事の例では、小さな画像をクリックして大きな画像を表示する効果の jQuery の実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、小さな画像をクリックすると大きな画像を表示できる jQuery ベースのコードです。ユーザーが商品の詳細を閲覧しやすくするために使用するのに適しています。
操作レンダリング: ------------------------エフェクトを表示------------- --- --------

ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
小さな画像をクリックして大きな画像を表示する効果を実現するためにみんなで共有したjQueryコードは以下の通りです

<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>

ログイン後にコピー

上記は、小さな画像をクリックして大きな画像を表示する効果を実現するために共有した jQuery コードです。気に入っていただければ幸いです。