首页>>Jquery图片>>鼠标经过显示放大图片 可以左右手动切换 点击放大的焦点图 支持一页多个效果(2014-07-09)

鼠标经过显示放大图片 可以左右手动切换 点击放大的焦点图 支持一页多个效果

鼠标经过显示放大图片 可以左右手动切换 点击放大的焦点图 支持一页多个效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="thumb_wrapper">  
  2.                         <div class="thumb">  
  3.                             <ul>  
  4.                                 <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg"><img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/></a></li>  
  5.                                 <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg" alt="Formstack 2"/></a></li>  
  6.                                 <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg" alt="Formstack 3"/></a></li>  
  7.                             </ul>  
  8.                         </div>  
  9.                         <a class="prev" href="#"></a>  
  10.                         <a class="next" href="#"></a>  
  11.                         <span>Hover to zoom, click to view</span>  
  12.                     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             $(function() {  
  3.                 /* 
  4.                 fancybox init on each cloud-zoom element 
  5.                  */  
  6.                 $("#content .cloud-zoom").fancybox({  
  7.                     'transitionIn'  :   'elastic',  
  8.                     'transitionOut' :   'none',  
  9.                     'speedIn'       :   600,  
  10.                     'speedOut'      :   200,  
  11.                     'overlayShow'   :   true,  
  12.                     'overlayColor'  :   '#000',  
  13.                     'cyclic'        :   true,  
  14.                     'easingIn'      :   'easeInOutExpo'  
  15.                 });  
  16.   
  17.                 /* 
  18.                 because the cloud zoom plugin draws a mousetrap 
  19.                 div on top of the image, the fancybox click needs 
  20.                 to be changed. What we do here is to trigger the click 
  21.                 the fancybox expects, when we click the mousetrap div. 
  22.                 We know the mousetrap div is inserted after 
  23.                 the <a> we want to click: 
  24.                  */  
  25.                 $("#content .mousetrap").live('click',function(){  
  26.                     $(this).prev().trigger('click');  
  27.                 });  
  28.   
  29.                 /* 
  30.                 the content element; 
  31.                 each list item / group with several images 
  32.                  */  
  33.                 var $content    = $('#content'),  
  34.                 $thumb_list = $content.find('.thumb > ul');  
  35.                 /* 
  36.                 we need to set the width of each ul (sum of the children width); 
  37.                 we are also defining the click events on the right and left arrows 
  38.                 of each item. 
  39.                  */  
  40.                 $thumb_list.each(function(){  
  41.                     var $this_list  = $(this),  
  42.                     total_w     = 0,  
  43.                     loaded      = 0,  
  44.                     //preload all the images first  
  45.                     $images     = $this_list.find('img'),  
  46.                     total_images= $images.length;  
  47.                     $images.each(function(){  
  48.                         var $img    = $(this);  
  49.                         $('<img/>').load(function(){  
  50.                             ++loaded;  
  51.                             if (loaded == total_images){  
  52.                                 $this_list.data('current',0).children().each(function(){  
  53.                                     total_w += $(this).width();  
  54.                                 });  
  55.                                 $this_list.css('width', total_w + 'px');  
  56.   
  57.                                 //next / prev events  
  58.   
  59.                                 $this_list.parent()  
  60.                                 .siblings('.next')  
  61.                                 .bind('click',function(e){  
  62.                                     var current = $this_list.data('current');  
  63.                                     if(current == $this_list.children().length -1) return false;  
  64.                                     var next    = ++current,  
  65.                                     ml      = -next * $this_list.children(':first').width();  
  66.   
  67.                                     $this_list.data('current',next)  
  68.                                     .stop()  
  69.                                     .animate({  
  70.                                         'marginLeft'    : ml + 'px'  
  71.                                     },400);  
  72.                                     e.preventDefault();  
  73.                                 })  
  74.                                 .end()  
  75.                                 .siblings('.prev')  
  76.                                 .bind('click',function(e){  
  77.                                     var current = $this_list.data('current');  
  78.                                     if(current == 0) return false;  
  79.                                     var prev    = --current,  
  80.                                     ml      = -prev * $this_list.children(':first').width();  
  81.   
  82.                                     $this_list.data('current',prev)  
  83.                                     .stop()  
  84.                                     .animate({  
  85.                                         'marginLeft'    : ml + 'px'  
  86.                                     },400);  
  87.                                     e.preventDefault();  
  88.                                 });  
  89.                             }  
  90.                         }).attr('src',$img.attr('src'));  
  91.                     });  
  92.                 });  
  93.             });  
  94.         </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_375.html