放大镜效果

效果如图

核心代码

   function mouseOver(e){                //中图和winSelector的移入与移动事件
        if($(".winSelector").css("display") == "none"){    
            $(".winSelector,.bigView").show();//显示winSelector
        }
        $(".winSelector").css(fixedPosition(e));//利用css改变winSelector的位置，fixedPosition将返回一个参数
        e.stopPropagation();//法将停止事件的传播,阻止它被分派到其他 Document 节点
    }
    function mouseOut(e){            //中图和winSelector的移出事件
        if($(".winSelector").css("display") != "none"){
            $(".winSelector,.bigView").hide();    //隐藏winSelector
        }
        e.stopPropagation();
    }
    $("#miding").mouseover(mouseOver);//中图触发mouseOver函数
    $("#miding,.winSelector").mousemove(mouseOver).mouseout(mouseOut);//移动与移出的触发
    var $divWidth=$(".winSelector").width();    //获得winSelector的宽度
    var $divHeight=$(".winSelector").height();    //获得winSelector的高度
    var $imgWidth=$("#miding").width();            //获得中图的宽度
    var $imgHeight=$("#miding").height();        //获得中图的高度
    var $viewImgWidth=$viewImgHeight=$height=null;
    $(".bigView").scrollLeft(0).scrollTop(0)//从0,0开始
    function fixedPosition(e){    //函数开始
        if(e == null){
            return ;
        }
        var $imgLeft=$("#miding").offset().left;    //中图距离左边的距离
        var $imgTop=$("#miding").offset().top;        //中途距离上边的距离
        //e.pageX在页面的X坐标
        X=e.pageX - $imgLeft - $divWidth/2;    
        //e.pageY在页面的Y坐标    
        Y=e.pageY - $imgTop - $divHeight/2;
        X=X<0?0:X;    //X的最小值
        Y=Y<0?0:Y;
        X=X+$divWidth > $imgWidth?$imgWidth-$divWidth:X; //X的最大值
        Y=Y+$divHeight > $imgHeight?$imgHeight-$divHeight:Y;
        if($viewImgWidth == null){
            $viewImgWidth = $(".bigView img").outerWidth();    //大图的宽
            $viewImgHeight = $(".bigView img").height();    //大图的高
            if($viewImgWidth < 200 || $viewImgHeight < 200){
                $viewImgWidth=$viewImgHeight=800;
            }
            $height=$divHeight * $viewImgHeight/$imgHeight;
            $(".bigView").width($divWidth * $viewImgWidth / $imgWidth);
            $(".bigView").height($height);//设置大图的高
        }
        //获得大图距离左边的位置，按照大图与中图的等比*X
        var scrollX=X*$viewImgWidth/$imgWidth;
        var scrollY=Y*$viewImgHeight/$imgHeight;
        $(".bigView img").css({"left":scrollX*-1,"top":scrollY*-1});//设置大图的位置
        $(".bigView").css({"top":$imgTop,"left":$(".p_images").offset().left+$(".p_images").width()+15});//设置大图外框的位置
        return {left:X,top:Y};
    }

 

我理解的执行步骤：

　　1.缩略图的点击，移入效果

　　2.按钮的点击效果

　　3.缩略图点击后，中图执行的函数

　　4.中图与滑动透明方形的移入，移出，移动效果

　　5.移动要执行的函数，如上代码

HTML代码：

<div class="p_images">
    <div class="bigImg">
        <img src="images/mid/01.jpg" width="400" height="400" alt="" id="miding" /> 
        <div style="display:none;" class="winSelector"></div>
    </div>
    <div class="smallImg">
        <div class="scrollBtn smallImgUp"></div>
        <div class="imgMenu">
            <ul>
                <li class="onlickImg"><img src="images/small/01.jpg" width="68" height="68"></li>
                <li><img src="images/small/02.jpg" width="68" height="68"></li>
                <li><img src="images/small/03.jpg" width="68" height="68"></li>
                <li><img src="images/small/04.jpg" width="68" height="68"></li>
                <li><img src="images/small/05.jpg" width="68" height="68"></li>
                <li><img src="images/small/06.jpg" width="68" height="68"></li>
                <li><img src="images/small/01.jpg" width="68" height="68"></li>
                <li><img src="images/small/02.jpg" width="68" height="68"></li>
                <li><img src="images/small/03.jpg" width="68" height="68"></li>
                <li><img src="images/small/04.jpg" width="68" height="68"></li>
                 <li><img src="images/small/05.jpg" width="68" height="68"></li>
                <li><img src="images/small/06.jpg" width="68" height="68"></li>
            </ul>
        </div>
        <div class="scrollBtn smallImgDown"></div>
    </div>
      <div class="bigView">
        <img src="" width="800" height="800">
    </div>
</div>