【js与jquery】jquery之放大镜插件源码分析

 
1.效果图如下：
 
2.放大镜插件：jquery.jqzoom.js
[php] view plaincopy
//**************************************************************  
// jQZoom allows you to realize a small magnifier window,close  
// to the image or images on your web page easily.  
//  
// jqZoom version 2.2  
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
// First Release on Dec 05 2007  
// i'm looking for a job,pick me up!!!  
// mail: [email protected]  
//**************************************************************  
  
(function($){  
        //定义jqueryzoom函数  
        $.fn.jqueryzoom = function(options){//参数列表，在调用的时候会使用  
  
            var settings = {  
                    xzoom: 200,     //默认的宽度  
                    yzoom: 200,     //默认的高度  
                    offset: 10,     //偏移量，即：离原图的距离  
                    position: "right" ,//放大图的定位，即：是在原图的左边还是右边  
                    lens:1, //鼠标移动到区域内1px时，则触发放大功能  
                    preload: 1  
  
            };  
  
            if(options) {  
                $.extend(settings, options);  
            }  
  
            var noalt='';  
              
            //当鼠标移动到元素上时所触发的函数，当前元素一般情况下为绑定hover事件的元素  
            $(this).hover(function(){  
                  
                //获取匹配元素在当前视口的相对偏移，即：左上角的位置  
                var imageLeft = $(this).offset().left;//距当前视口做边距                  
                var imageTop = $(this).offset().top;//距当前视口顶部边距  
  
                 
                var imageWidth = $(this).children('img').get(0).offsetWidth;//图片宽度  
                var imageHeight = $(this).children('img').get(0).offsetHeight;//图片高度  
  
                //取得<img>元素的alt属性的值，为空  
                noalt= $(this).children("img").attr("alt");  
  
                //获取<img>元素jqimg属性的值："images/pro_img/blue_one_big.jpg"  
                var bigimage = $(this).children("img").attr("jqimg");  
  
                //将<img>元素的alt属性赋值为空  
                $(this).children("img").attr("alt",'');  
  
                //如果模版中没有<div class="zoomdiv">  
                if($("div.zoomdiv").get().length == 0){  
  
                    //则在<div class="jqzoom"><div>后面动态插入一个<div class="zoomdiv"><img class='bigimg' src='"+bigimage+"'/></div>  
                    $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  
                    //在<div class="jqzoom"><div>内动态追加一个<div class="jqZoomPup"> </div>  
                    $(this).append("<div class='jqZoomPup'> </div>");  
  
                }  
  
                //显示位置：right-在原图片右边显示  
                if(settings.position == "right"){  
                    //原图距左边的距离+原图片宽度+放大图距原图片的偏移量+放大图片的宽度 > 整个屏幕的宽度  
                    //这种情况一般不会出现  
                    if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){  
  
                        leftpos = imageLeft  - settings.offset - settings.xzoom;  
  
                    }else{  
  
                        //正常情况：大图左边位置  
                        leftpos = imageLeft + imageWidth + settings.offset;  
                    }  
                }else{//大图显示位置在原图左边的情况  
                    leftpos = imageLeft - settings.xzoom - settings.offset;  
  
                    if(leftpos < 0){  
  
                        leftpos = imageLeft + imageWidth  + settings.offset;  
  
                    }  
  
                }  
  
                //设置大图的左上角坐标位置  
                $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  
                //设置大图的宽度  
                $("div.zoomdiv").width(settings.xzoom);  
  
                //设置大图的高度  
                $("div.zoomdiv").height(settings.yzoom);  
  
                //显示匹配的隐藏元素，即：大图  
                $("div.zoomdiv").show();  
  
                if(!settings.lens){  
                    $(this).css('cursor','crosshair');  
                }  
  
  
  
                //鼠标离开body区域时触发mouseover事件  
                $(document.body).mousemove(function(e){  
  
                    //主要用来获取鼠标的坐标位置  
                    mouse = new MouseEvent(e);  
  
                   /*$("div.jqZoomPup").hide();*/  
  
                    //大图的宽度，<div class="bigimg"></div>  
                    var bigwidth = $(".bigimg").get(0).offsetWidth;  
                    //大图的高度  
                    var bigheight = $(".bigimg").get(0).offsetHeight;  
  
                    var scaley ='x';//放大比例  
  
                    var scalex= 'y';//放大比例  
  
  
                    if(isNaN(scalex)|isNaN(scaley)){  
  
                        var scalex = (bigwidth/imageWidth);//宽度的放大比率  
  
                        var scaley = (bigheight/imageHeight);//高度的放大比率  
  
                        $("div.jqZoomPup").width((settings.xzoom)/scalex );//放大镜的宽度  
  
                        $("div.jqZoomPup").height((settings.yzoom)/scaley);//放大镜的高度  
  
                        if(settings.lens){  
                            $("div.jqZoomPup").css('visibility','visible');//放大镜可见  
                        }  
  
                    }    
  
                    xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;//放大镜x坐标  
  
                    ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;//放大镜y坐标  
  
                    if(settings.lens){  
  
                        xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?  (imageWidth -$("div.jqZoomPup").width() -2)  : xpos;  
  
                        ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2  > imageHeight + imageTop ) ?  (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;  
  
                    }  
  
  
                    if(settings.lens){  
  
                        $("div.jqZoomPup").css({ top: ypos,left: xpos });  
  
                    }  
  
                    scrolly = ypos;  
  
                    $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;  
  
                    scrollx = xpos;  
  
                    $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  
  
                 });//结束mousemove  
  
            },//结束hover  
                  
            function(){  
  
                $(this).children("img").attr("alt",noalt);  
                $(document.body).unbind("mousemove");  
                if(settings.lens){  
                    $("div.jqZoomPup").remove();  
                }  
                $("div.zoomdiv").remove();  
  
            });  
  
            count = 0;  
  
            if(settings.preload){  
  
                $('body').append("<div style='display:none;' class='jqPreload"+count+"'>sdsdssdsd</div>");  
  
                $(this).each(function(){  
  
                    var imagetopreload= $(this).children("img").attr("jqimg");  
  
                    var content = jQuery('div.jqPreload'+count+'').html();  
  
                    jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');  
  
                });  
  
            }  
  
        }//结束jqueryzoom  
  
})(jQuery);  
  
function MouseEvent(e) {  
    this.x = e.pageX;  
    this.y = e.pageY;  
}  

3.use_jqzoom.js:使用放大镜插件
[php] view plaincopy
$(function(){  
    $(".jqzoom").jqueryzoom({  
                    xzoom: 300, //放大图的宽度(默认是 200)  
                    yzoom: 300, //放大图的高度(默认是 200)  
                    offset: 10, //离原图的距离(默认是 10)  
                    position: "right", //放大图的定位(默认是 "right")  
                    preload:1     
    });  
});  

 
4.html文件代码：
[php] view plaincopy
<div class="jqzoom">  
[php] view plaincopy
<img src="images/pro_img/blue_one_small.jpg" class="fs" alt=""  jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>  
[php] view plaincopy
</div>  
<span>  
<a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox">  
   <img alt="点击看大图" src="images/look.gif" />  
</a>  
</span>  
<ul class="imgList">  
    <li><img src="images/pro_img/blue_one.jpg" alt="" /></li>  
    <li><img src="images/pro_img/blue_two.jpg" alt="" /></li>  
    <li><img src="images/pro_img/blue_three.jpg" alt="" /></li>  
</ul>  

5.鼠标移上去前后对比：
 
版权声明：本文为博主原创文章，未经博主允许不得转载。