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"          })     }) }) 11.15

 

上一篇:Practical Training Demo1-album-detail的jQuery-放大镜的写法


下一篇:自增build ID配置