jquery鼠标经过放大图片，包覆盖原图后显示大图和附近位置显示大图

jquery鼠标经过放大图片，包覆盖原图后显示大图和附近位置显示大图

 

演示

 

 

XML/HTML Code

1. <section id="example">  
2.   
3. <h2> 覆盖原图 </h2>  
4. <div class="easyzoom easyzoom--overlay"> <a href="example-images/1_zoom.jpg"> <img src="example-images/1_standard.jpg" alt="" width="640" height="360" /> </a> </div>  
5.   
6. <h2> 临近位置显示放大图片 </h2>  
7.   
8. <div style="float: right; width: 310px; height: 400px; background: #EEE;"></div>  
9. <div class="easyzoom easyzoom--adjacent"> <a href="example-images/2_zoom.jpg"> <img src="example-images/2_standard.jpg" alt="" width="310" height="400" /> </a> </div>  
10.   
11. </section>  

 

JavaScript Code

1. <script>  
2.         // Instantiate EasyZoom plugin  
3.         var $easyzoom = $('.easyzoom').easyZoom();  
4.   
5.         // Get the instance API  
6.         var api = $easyzoom.data('easyZoom');  
7.     </script>   

 

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