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