console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
</head>
<style>
.small, .big{
float: left;
width: 400px;
height: 400px;
margin-left: 1rem;
border: 1px solid #cccccc
}
.small{
position: relative;
}
.small img{
width: 100%;
}
.big{
position: relative;
display: none;
overflow: hidden;
}
.big img{
position: absolute;
width: 600px
}
.fd{
display: none;
position: absolute;
top: 0;
left: 0;
width:75px;
height: 75px;
background-color: orange;
opacity: 0.4
}
</style>
<body>
<div class="small">
<img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/126823/36/14820/43442/5f86141aE9b1c0424/5b226412092ef7bc.jpg" />
<div class="fd"></div>
</div>
<div class="big">
<img src="https://img14.360buyimg.com/n0/jfs/t1/126823/36/14820/43442/5f86141aE9b1c0424/5b226412092ef7bc.jpg" />
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$('.small').mousemove(function(e){
$('.fd').fadeIn(1000)
$('.big').fadeIn()
var smWidth = $('.big img').width()
var bigWidth = $('.small').width()
var t = bigWidth/smWidth
var x = e.pageX - $('.small').offset().left - $('.fd').outerWidth()/2
var y = e.pageY - $('.small').offset().top - $('.fd').outerHeight()/2
var maxX = $('.small').width() - $('.fd').width()
var maxy = maxX
if(x < 0){
x = 0
y = y < 0? 0 : y
}else if(y < 0){
y = 0
}
if(x > maxX){
x = maxX
y = y > maxy? maxy : y
}else if(y > maxy){
y = maxy
}
$('.fd').css({
'left': x,
'top': y
})
$('.big img').css({
'left': -t * x,
'top': -t * y
})
console.log($('.small .fd').offset().left)
console.log($('.big img').offset().left)
})
$('.small').mouseleave(function(){
$('.fd').css('display', 'none')
$('.big').css('display', 'none')
})
})
</script>
</html>