本文实例讲述了jQuery实现点击小图显示大图效果。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的点击小图查看大图的代码，适合用于产品展示等环节，便于用户浏览产品细节，是一款非常实用的特效代码。
运行效果图： ----------------------查看效果-----------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery实现点击小图显示大图效果代码如下
<head> <title>jQuery实现点击小图显示大图效果</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/pngobject.js"></script> <link href="https://www.jb51.net/style/style.css" type="text/css" /> <link href="https://www.jb51.net/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>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> <h4>jQuery 实现点击小图显示大图</h4> <p> <a href="https://www.jb51.net/example/11.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="https://www.jb51.net/example/1.jpg" /></a> <a href="https://www.jb51.net/example/22.jpg" title=""><img alt="" src="https://www.jb51.net/example/2.jpg" /></a> <a href="https://www.jb51.net/example/44.jpg" title=""><img alt="" src="https://www.jb51.net/example/4.jpg" /></a> </p> <p> <a href="https://www.jb51.net/example/33.jpg" title=""><img alt="" src="https://www.jb51.net/example/3.jpg" /></a> <a href="https://www.jb51.net/example/8_b.jpg" title=""><img alt="" src="https://www.jb51.net/example/8_s.jpg" /></a> <a href="https://www.jb51.net/example/9_b.jpg" title=""><img alt="" src="https://www.jb51.net/example/9_s.jpg" /></a> </p> </div> <div><p> </p></div> </body> </html>
以上就是为大家分享的jQuery实现点击小图显示大图效果代码，希望大家可以喜欢。
您可能感兴趣的文章: