自己写的一个JQ放大镜插件

 
/**
   ***********************************************
   **此插件使用须知---------------              **
   **滤镜（inner）与其活动区(active)之比要等于  **
   **放大区(movequ)与其内部图片之比。如比值不相 **
   **等，请改变图片大小.------------------------**
   **参数介绍                                   **
   **active:滤镜活动区                          **
   **inner:滤镜                                 **
   **movequ:放大区域                            **
   **需在Html头部引入本js脚本及jquery-1.8.3脚本 **
   **如有疑问，请联系QQ：64047399，为你解答     **
   ***********************************************
  
**/
  
  
$.fn.extend({
    yangbo:function(active,inner,movequ){
        $(active).hover(function(){
            $(inner).show();
            $(movequ).show();
            var proportionOne=$(active).width()/$(inner).width();
            var proportionTwo=$(movequ).find('img').width()/$(movequ).width();
            // console.log($(movequ).find('img').width());
            if(proportionOne==proportionTwo){
            $(this).mousemove(function(event){
                //以下为右侧放大
                var proportionLeft=$(active).width()/$(inner).width();
                var proportionTop=$(active).height()/$(inner).height();
                $(movequ).scrollLeft($(inner).position().left*proportionLeft).scrollTop($(inner).position()
                .top*proportionTop);
  
                //以下为小滤镜拖拽
                $(inner).offset({
                        left:event.pageX-40,
                        top:event.pageY-40
                    });
  
                //以下为判断临界值
                if($(inner).position().left<=0){
                        $(inner).css({
                            left:0
                        })
                    }
                    if($(inner).position().top<=0){
                        $(inner).css({
                            top:0
                        })
                    }
                    if($(inner).position().left>=$(this).width()-$(inner).width()){
                        $(inner).css({
                            left:$(this).width()-$(inner).width()
                        })
                    }
                    if($(inner).position().top>=$(this).height()-$(inner).height()){
                        $(inner).css({
                            top:$(this).height()-$(inner).height()
                        })
                    }
  
            })
        }else{
            $(active).text('图片宽高不正确:请调整图片宽高-->滤镜与其父亲之比应该等于右侧盒子与右侧图片之比')
            .css({
                background:'yellow',
                color:'red',
            });
        }
    },function(){
            $(inner).hide();
            $(movequ).hide();
        })
  
  
    }
  
})