image.png
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img {
display: block;
}
.smallBox {
width: 200px;
height: 200px;
float: left;
position: relative;
margin-left: 100px;
margin-top: 100px;
border: 1px solid #ccc;
}
.tool {
width: 50px;
height: 50px;
background: #000;
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.smallImg {
width: 200px;
height: 200px;
}
.smallImg img {
width: 200px;
height: 200px;
}
.bigBox {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
margin-left: 100px;
position: relative;
margin-top: 100px;
border: 1px solid #ccc;
}
.bigImg {
width: 800px;
height: 800px;
}
.bigBox img {
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="smallBox">
<div class="tool"></div>
<div class="smallImg">
</div>
</div>
<div class="bigBox">
<div class="bigImg">
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('.smallBox').mousemove(function(e){
var x = e.pageX - $('.smallBox').offset().left - $('.tool').width()/2;
var y = e.pageY - $('.smallBox').offset().top - $('.tool').height()/2;
//限制下移动范围
var maxLeft = $('.smallBox').width() - $('.tool').width();
var maxTop = $('.smallBox').height() - $('.tool').height();
if(x <= 0){
x = 0;
}
if(x >= maxLeft){
x = maxLeft;
}
if(y <= 0){
y = 0;
}
if(y >= maxTop){
y = maxTop;
}
$('.tool').css({'left': x,'top':y});
//算下比例
var widthNum = $('.bigBox img').width()/$('.smallBox img').width();
var heightNum = $('.bigBox img').height()/$('.smallBox img').height();
$('.bigBox img').css({
'left': -(widthNum*x),
'top': -(heightNum*y)
})
})
</script>
</html>
