基于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.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.

这个里面主要有二点

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

【编辑推荐】

  1. jQuery插件之Ajax自动完成
  2. jQuery基本事件代码优化
  3. 印象深刻的jQuery手风琴效果应用
  4. jQuery可多次使用的星级插件
  5. JQuery插件的开发真的有那么难吗
责任编辑:张伟 来源: 船长op的博客
相关推荐

2017-01-22 17:25:55

Android放大镜效果源码分析

2015-03-10 11:36:25

jQuery仿淘宝产品图片放大镜代码

2011-09-08 17:50:34

Windows7放大镜

2023-08-02 08:00:00

JavaScriptWeb

2012-06-15 10:33:06

JavaScript

2021-08-23 15:10:52

GNOME双重绘制桌面

2009-04-16 09:28:30

NokiaPhoto BrowsS60

2024-12-04 11:04:24

微软Windows 11

2011-03-31 09:25:10

2010-05-12 16:08:08

云计算安全

2025-01-26 08:00:00

模型AI数据

2012-04-26 10:56:05

jQuery效果

2012-06-08 14:32:13

HTML5

2018-05-23 20:25:41

数据科学数据库信息技术

2012-03-26 21:47:23

苹果

2023-08-10 08:49:46

GoogleAI云端

2017-02-10 21:15:22

Windows 10Windows操作技巧

2019-08-07 16:02:27

编程语言RustTypeScript

2012-06-13 15:21:26

jQuery

2009-09-23 17:19:19

jQuery页面渐显效
点赞
收藏

51CTO技术栈公众号