原創Jquery實現圖片放大鏡插件

dengjianbin 12年前發布 | 33K 次閱讀 放大鏡特效 圖片展示jQuery插件 jQuery插件

此Jquery插件是一款非常實用的功能，是商城不可缺少的神兵利器之一，主要是顯示小圖片預覽大圖片效果。

主要設置4個參數：

1、需要放大的區域

2、放大鏡寬高

3、需要放大的區域寬高

4、需要放大的區域的圖片的寬高

   

插件初始化代碼如下： 

;(function($){
    $.fn.simpleZoom = function(options){
        var defs = {
            zoomBox : "#zoomBox",           //需要放大的區域
            markSize : [200, 100],          //放大鏡寬高
            zoomSize : [400, 400],          //需要放大的區域寬高
            zoomImg : [800, 800]            //需要放大的區域的圖片的寬高
        };
        var opt = $.fn.extend({}, defs, options);
        return this.each(function(){
            var markBox = $(this);
            var zoomBox = $(opt.zoomBox);
            var zoom_img = $(opt.zoomBox).find("img"); 
            var markBoxSize = [markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top];
            var markSize = opt.markSize;
            var zoomSize = opt.zoomSize;
            var zoomImg = opt.zoomImg;
            var mark_ele = "<i id='mark'></i>";
            var mark_css = {position:"absolute", top:0, left:0, width:markSize[0]+"px", height:markSize[1]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)",  display:"none", cursor:"crosshair"};



        var show_w = markBoxSize[0]-markSize[0];
        var show_h = markBoxSize[1]-markSize[1];

        //created mark element and add cascading style sheets
        zoomBox.css({width:zoomSize[0]+"px", height:zoomSize[1]+"px"});
        markBox.append(mark_ele);
        $("#mark").css(mark_css);

        markBox.mouseover(function(){
            $("#mark").show();
            zoomBox.show();
        }).mouseout(function(){
            $("#mark").hide();
            zoomBox.hide();
        }).mousemove(function(e){
            var l = e.pageX-markBoxSize[2]-(markSize[0]/2);
            var t = e.pageY-markBoxSize[3]-(markSize[1]/2);
            if(l < 0){
                l = 0;
            }else if(l > show_w){
                l = show_w;
            }
            if(t < 0){
                t = 0;
            }else if(t > show_h){
                t = show_h;
            }

            $("#mark").css({left:l+"px", top:t+"px"});

            var z_x = -(l/show_w)*(zoomImg[0]-zoomSize[0]);
            var z_y = -(t/show_h)*(zoomImg[1]-zoomSize[1]);
            zoom_img.css({left:z_x+"px", top:z_y+"px"});
        });
    });
}



})(jQuery);</pre>



</div>
</div>







</tr>
</tbody>
</table>
</div>






1
$(function(){    


</tr>
</tbody>
</table>
</div>






2
    $("#show").simpleZoom({ 


</tr>
</tbody>
</table>
</div>






3
        zoomBox : "#zoom", 


</tr>
</tbody>
</table>
</div>






4
        markSize : [120, 169], 


</tr>
</tbody>
</table>
</div>






5
        zoomSize : [240, 338], 


</tr>
</tbody>
</table>
</div>






6
        zoomImg : [480, 677] 


</tr>
</tbody>
</table>
</div>






7
    }); 


</tr>
</tbody>
</table>
</div>
</div>
</div>
效果如下： 
網友sole分享原創Jquery實現圖片放大鏡插件

在線演示和下載



                        
 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔

                        
                    


                    
                
   




8
});




                    
                    

                
                
            
        
      



    
    
    
    
    
    
    
 
    
    

    
    

    
    
    
    
    


  • 

  • 

    • 

    • 

    • 

sesese色