<!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>
