PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

基于jQuery的图片放大镜效果

基于jQuery的图片放大镜效果

来源:phperz.com  作者:phper  发布时间:2012-06-09
其实就是用到一个比例关系,当放大镜移动多少比例(是比例,不是具体值),大图也同时用这个比例去乘以大图的宽和高,就可以算出大图该移动多少距离了; 先看一下效果 接下来是核心代码 $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的

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

先看一下效果

 

接下来是核心代码

    $(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,不然“放大镜”罩住的小图区域,和大图的显示区域,所显示的图像信息,不能保持一致。(妙味课堂里讲的那个实例,就是没有保持一至);

demo下载

 


延伸阅读:
使用jQuery制作商品放大镜效果
使用Jquery的Jqzoom插件实现放大镜效果
Jquery图片放大镜插件
Tags: jQuery   放大镜  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号