Jquery插件编写和图片跟随鼠标放大插件

主要有两个注意的地方：
1.在插件中继续使用$别名.使用闭包方式
在jquery中用$作为Jquery别名，编写插件时要注意，可能$已经作为别名被其他库占用。
使用一下方法可以避免这种情况的发生：
(function($){})(jQuery)
第一个括号声明了一个匿名函数，用括号括起来，则返回这个函数的引用。
第二个括号中的数据作为该匿名函数的实参，传入函数。被$所引用。
这样如果在外部定义了$，也不会产生$的冲突。
2.参数的传递
传入参数一般使用json数据.并在插件中设置相应默认值，使用$.extend()扩展对象，将默认设置和传入参数合并。
 
以下是该插件代码：

/*
使用说明：
结构：

<div class="show1">
    <a>
        <img class="img1" src="images/pic1.jpg" bigSrc="" >
    </a>
</div>

 

样式：
 

.show1{width: 190; height: 190;  overflow: hidden;position:relative; }
  .img1{width: 190; height: 190; position:absolute;}

 

*/

 (function($){
  //获取参数
  var _zoomsetting;
  var timeoutId=0;
  $.fn.zoom =function(settingArg){
         _zoomsetting = $.extend({
               bImgWidth:348,//大图宽度
               bImgHeight:348,//大图高度
               sImgWidth:190,//小图宽度
               sImgHeight:190,//小图高度
               animateduration:500,//图像变大速度
               waittime:300,//等待的时间
               type:1//1使用同一张图，2使用2张图行,暂时未加入异步加载的方式。
         },settingArg||{});
        
  var sh = _zoomsetting.sImgHeight;
  var sw = _zoomsetting.sImgWidth;
  var bh = _zoomsetting.bImgHeight
  var bw = _zoomsetting.bImgWidth;
  var wt = _zoomsetting.waittime;
  var ad = _zoomsetting.animateduration;
  var st = _zoomsetting.type;
       
      $(".imgShow").mouseout(
               function(){
                    clearTimeout(timeoutId);
                    var img=$(this).find("img");
                    img.stop();
                    if(st==2)
                    {
                        var src=img.attr("src");
                        img.attr("src",img.attr("bigScr")).attr("bigScr",src);
                    }
                    img.css({top:0,left:0,width:sw,height:sh})
                    .end().unbind("mousemove").bind("mousemove",imgAnimate);
                    }
               ).mousemove(imgAnimate);
  
       function imgAnimate(e){
               var that=this;
               clearTimeout(timeoutId);
               timeoutId=setTimeout(function(){
                $(that).unbind("mousemove");
                var thisOffset=$(that).offset();
                var left=-((e.pageX-thisOffset.left)*(bw/sw-1));
                var top=-((e.pageY-thisOffset.top)*(bh/sh-1));
                $(that).find("img").animate({height:bh,width:bw,top:top,left:left},{duration:ad,complete:function(){
                  var img=$(this);
                  if(st==2)
                  {
                      var src=img.attr("src");
                      img.attr("src",img.attr("bigScr")).attr("bigScr",src).parent().mousemove(m2);
                  }
                  img.parent().parent().mousemove(imgParentMove);
                 }});
               },wt);
        }
 
        function imgParentMove(e){
               var thisOffset1=$(this).offset();
               var left1=-((e.pageX-thisOffset1.left)*(bw/sw-1));
               var top1=-((e.pageY-thisOffset1.top)*(bh/sh-1));
               $(this).find("img").css({top:top1,left:left1});
        }

  }
 
  })(jQuery);

 

 

效果：

原图:

跟随鼠标移动需要展示区域