<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="jquery.js"></script> <style> *{ margin: 0px; padding: 0px; } .outer{ margin-left: 250px; margin-top: 250px; width:311px; height: 207px; position: relative; border:5px dashed lawngreen; } .float{ height:150px; width:150px; background-color: darkgray; opacity: 0.5; position: absolute; } .outer .small_box{ height:207px; } .outer .big_box{ position: absolute; top:-5px; left:321px; border: 5px dashed darkorange; width: 300px; height: 300px; overflow: hidden; } .outer .big_box img{ position: absolute; } .hide{ display: none; } </style> <body> <div class="outer"> <div class="small_box"> <div class="float hide"> </div> <img src="small.jpg"/> </div> <div class="big_box hide"> <img src="big.jpg"/> </div> </div> </body> </html> <script> $(".small_box").mouseover(function(){ $(".float").removeClass('hide'); $(".big_box").removeClass("hide"); }) $(".small_box").mouseout(function(){ $(".float").addClass('hide'); $(".big_box").addClass("hide"); }) $(".small_box").mousemove(function (e) { //防止其获取坐标出错 var _event=e || windows.event; //图片所在文档的偏移位置 var small_box_offset_top=$(".small_box").offset().top; var small_box_offset_left=$(".small_box").offset().left; //图片框的大小 var small_box_height=$(".small_box").height(); var small_box_width=$(".small_box").width(); //遮罩层的大小，取一半，为后面遮罩层四边和鼠标做准备 var float_height=$(".float").height()/2; var float_width=$(".float").width()/2; //面板可移动面积：只有中间区域，边界距离为面板的一半是无法移动的 //判断时将鼠标坐标转换到面板边界，然后与小照片相比 //鼠标为遮罩层的中心，获取遮罩层的四边，以便限制移动 var mouse_left=_event.clientX-float_width; var mouse_top=_event.clientY-float_height; var mouse_right=_event.clientX+float_width; var mouse_bottom=_event.clientY+float_height; //遮罩层应该移动的距离 var move_left=mouse_left-small_box_offset_left; var move_top=mouse_top-small_box_offset_top; if(mouse_top<=small_box_offset_top) move_top=0; if(mouse_bottom>small_box_offset_top+small_box_height) move_top=small_box_height-float_height*2; if(mouse_left<=small_box_offset_left) move_left=0; if(mouse_right>small_box_offset_left+small_box_width) move_left=small_box_width-float_width*2; $(".float").css('left',move_left+'px'); $(".float").css('top',move_top+'px'); //大图移动 //大小图比例获取 2:1 这是大小图片之比 var x_scan=$('.big_box img').height()/small_box_height; var y_scan=$(".big_box img").width()/small_box_width; //比例另外获取方法： 这是大小框可移动长度之比（更适用大多数情况） var x_scan=($('.big_box img').height()-$(".big_box").height())/(small_box_height-float_height*2); var y_scan=($(".big_box img").width()-$(".big_box").width())/(small_box_width-float_width*2); //大小图的移动是相对的，成倍数的 $(".big_box img").css('top',-move_top*x_scan+'px'); $(".big_box img").css('left',-move_left*y_scan+'px'); }) </script>