首页>>Jquery图片>>鼠标滚动放大图片 支持多图异步加载(2014-12-18)

鼠标滚动放大图片 支持多图异步加载

 大图片是异步加载的，有些浏览器兼容性有些问题，加减号无效，不过仍然可以用鼠标滚动后放大和缩小

鼠标滚动放大图片 支持多图异步加载
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="gallery">  
  2.         <script type='text/javascript'>  
  3.             jQuery(function ($) {  
  4.                 $('.zoom_thumbnails').find('li a').each(function () {  
  5.                     $(this).bind('click', { src: $(this).attr('href') }, function (e) {  
  6.                         $('.zoom_container').smoothZoom('destroy').css('background-image', 'url(images/loading.gif)').smoothZoom({  
  7.                             image_url: e.data.src,  
  8.                             //width: 778,  
  9.                             height: 320,  
  10.                             background_COLOR: 'transparent',  
  11.                             responsive: true,  
  12.                             responsive_maintain_ratio: true,  
  13.                             max_WIDTH: '',  
  14.                             max_HEIGHT: '',  
  15.                             pan_BUTTONS_SHOW: false  
  16.                         });  
  17.                         return false;  
  18.                     });  
  19.                 }).eq(0).trigger('click');  
  20.             });  
  21.         </script>  
  22.         <div class="zoom_container">  
  23.               
  24.         </div>  
  25.         <div class="zoom_thumbnails">  
  26.             <ul>  
  27.                                         <li>  
  28.                         <a href="../dandong.png">  
  29.                             <img src="../dandong.png" width="150"/>  
  30.                         </a>  
  31.                     </li>  
  32.                                         <li>  
  33.                         <a href="../erlianhaote.png">  
  34.                             <img src="../erlianhaote.png" width="150"/>  
  35.                         </a>  
  36.                     </li>  
  37.                       
  38.             </ul>  
  39.         </div>  
  40.           
  41.           
  42.     </div>  

 


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