基于jQuery的放大镜效果

先看一下效果

接下来是核心代码

 
 
 
 
  
  
  
  $(function(){  
  
  
  
      var mouseX = 0;        //鼠标移动的位置X  
  
  
  
      var mouseY = 0;        //鼠标移动的位置Y  
  
  
  
      var maxLeft = 0;    //最右边  
  
  
  
      var maxTop = 0;        //最下边  
  
  
  
      var markLeft = 0;    //放大镜移动的左部距离  
  
  
  
      var markTop = 0;    //放大镜移动的顶部距离  
  
  
  
      var perX = 0;    //移动的X百分比  
  
  
  
      var perY = 0;    //移动的Y百分比  
  
  
  
      var bigLeft = 0;    //大图要移动left的距离  
  
  
  
      var bigTop = 0;        //大图要移动top的距离  
  
  
  
   
  
  
  
      //改变放大镜的位置  
  
  
  
      function updataMark($mark){  
  
  
  
          //通过判断，让小框只能在小图区域中移动          
  
  
  
          if(markLeft<0){  
  
  
  
              markLeft = 0;  
  
  
  
          }else if(markLeft>maxLeft){  
  
  
  
              markLeft = maxLeft;  
  
  
  
          }  
  
  
  
            
  
  
  
            
  
  
  
          if(markTop<0){  
  
  
  
              markTop = 0;  
  
  
  
          }else if(markTop>maxTop){  
  
  
  
              markTop = maxTop;  
  
  
  
          }  
  
  
  
            
  
  
  
          //获取放大镜的移动比例，即这个小框在区域中移动的比例  
  
  
  
          perX = markLeft/$(".small").outerWidth();  
  
  
  
          perY = markTop/$(".small").outerHeight();  
  
  
  
            
  
  
  
          bigLeft = -perX*$(".big").outerWidth();  
  
  
  
          bigTop = -perY*$(".big").outerHeight();  
  
  
  
            
  
  
  
          //设定小框的位置  
  
  
  
          $mark.css({"left":markLeft,"top":markTop,"display":"block"});  
  
  
  
      }  
  
  
  
        
  
  
  
      //改变大图的位置  
  
  
  
      function updataBig(){  
  
  
  
          $(".big").css({"display":"block","left":bigLeft,"top":bigTop});  
  
  
  
      }  
  
  
  
        
  
  
  
      //鼠标移出时  
  
  
  
      function cancle(){  
  
  
  
          $(".big").css({"display":"none"});      
  
  
  
          $(".mark").css({"display":"none"});  
  
  
  
      }  
  
  
  
        
  
  
  
      //鼠标小图上移动时  
  
  
  
      function imgMouseMove(event){  
  
  
  
            
  
  
  
          var $this = $(this);  
  
  
  
          var $mark = $(this).children(".mark");  
  
  
  
              
  
  
  
          //鼠标在小图的位置  
  
  
  
          mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;  
  
  
  
          mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;  
  
  
  
            
  
  
  
          //最大值  
  
  
  
          maxLeft =$this.width()- $mark.outerWidth();  
  
  
  
          maxTop =$this.height()- $mark.outerHeight();  
  
  
  
          markLeft = mouseX;  
  
  
  
          markTop = mouseY;  
  
  
  
            
  
  
  
          updataMark($mark);  
  
  
  
          updataBig();  
  
  
  
      }  
  
  
  
        
  
  
  
        
  
  
  
      $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);  
  
  
  
  })

这个里面主要有二点

1.如何大图跟随"放大镜"的位置，同时移动大图?

其实就是用到一个比例关系，当“放大镜”移动多少比例（是比例，不是具体值），大图也同时用这个比例去乘以大图的宽和高，就可以算出大图该移动多少距离了；

2.显示区域和放大镜的关系？

这里的“放大镜”应该和大图的显示区域的比例，应该是大图和小的比例关系一样。比如大图和小图的比例是1:2，那个“放大镜”区域的大小，和显示大图区域的大小比例也应该是1:2，不然“放大镜”罩住的小图区域，和大图的显示区域，所显示的图像信息，不能保持一致。（妙味课堂里讲的那个实例，就是没有保持一至）;

在线演示：http://demo.jb51.net/js/2012/mymagnifier/

代码下载：DEMO下载

原文链接：http://www.cnblogs.com/lufy/archive/2012/05/29/2523439.html

【编辑推荐】

jQuery插件之Ajax自动完成
jQuery基本事件代码优化
印象深刻的jQuery手风琴效果应用
jQuery可多次使用的星级插件
JQuery插件的开发真的有那么难吗

名称栏目：基于jQuery的放大镜效果
文章地址：http://www.shufengxianlan.com/qtweb/news30/343930.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容