11.15

图片放大镜：

$(function(){

    //图片放大镜

    $(".small_box").hover(function(){

        $(this).find(".float_layer").show();

        $(".big_box").show();

    },function(){

        $(this).find(".float_layer").hide();

    })

    $(".small_box").mousemove(function(e){

        //鼠标位置

        var x=e.offsetX,y=e.offsetY;

        //小黑框左上角位置，-100 是让鼠标永远在小黑框的中间

         var left=x-100,top=y-100;

         if(left < 0){ //向左

             left = 0;

         }

         if(top < 0){

            top = 0;

        }

        if(left > 200){ //向右

            left = 200;

        }

        if(top > 200){

           top = 200;

       }

         

         $(this).find(".float_layer").css({//向右

             top:top +"px",

             left:left +"px"

         })

         $(".big_box img").css({//向左动

            top:-2* top +"px",

            left:-2* left +"px"

         })

    })

})