商品放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.4.1.min.js.js"></script>
<style>
*{ margin: 0; padding:0;}
img{ display: block}
.small{ width: 350px; height:350px; border: 1px solid #000; margin: 100px; position: relative; float: left;}
.small span{ width: 175px; height: 175px; background: rgba(0,255,0,.5); position:absolute; left: 0; top: 0; display:none;}
.big{ float: left; overflow: hidden; width: 400px; height: 400px;border: 1px solid #000; margin-top: 100px;display:none; position: relative; background: brown}
.big img{position: absolute; left: 0; top: 0;}
</style>
</head>
<body>
<div class="small">
<img src='img/1_b.jpg'>
<span></span>
</div>
<div class="big"><img src="img/1_c.jpg"></div>
<script>
$(function(){
$('.small').hover(function(){
$('.small span').show()
$('.big').show()
},function(){
$('.small span').hide()
$('.big').hide()
})
$('.small').mousemove(function(ev){
var L = ev.pageX-$('.small').offset().left-$('.small span').width()/2;
var T = ev.pageY-$('.small').offset().top-$('.small span').height()/2;
if(L<0){
L=0
}else if(L> $('.small').width()-$('.small span').width()){
L = $('.small').width()-$('.small span').width()
}
if(T<0){
T=0
}else if(T> $('.small').height()-$('.small span').height()){
T = $('.small').height()-$('.small span').height()
}
$('.small span').css({left:L,top:T})
var x = ($('.big img').width()-$('.big').width())*L/($('.small').width()-$('.small span').width())
var y = ($('.big img').height()-$('.big').height())*T/($('.small').height()-$('.small span').height())
$('.big img').css({left:-x,top:-y})
})
})
</script>
</body>
</html>