집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 작은 그림을 클릭하여 큰 그림 코드를 표시하는 것을 인식합니다.

jQuery는 작은 그림을 클릭하여 큰 그림 코드를 표시하는 것을 인식합니다.

WBOY원래의: 2016-05-16 15:43:031225검색

이 기사의 예에서는 작은 이미지를 클릭하여 큰 이미지를 표시하는 효과를 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 코드입니다.

성명：

이전 기사：웹 이미지 및 텍스트 효과를 위한 14가지 클래식 jQuery 플러그인 - 프런트엔드 개발에 필수_jquery다음 기사：웹 이미지 및 텍스트 효과를 위한 14가지 클래식 jQuery 플러그인 - 프런트엔드 개발에 필수_jquery

jQuery는 작은 그림을 클릭하여 큰 그림 코드를 표시하는 것을 인식합니다.

관련 기사