本文實例講述了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實現點擊小圖顯示大圖效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
