<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding:0;} .lf{width: 300px;height: 300px;border: 1px solid gray;position: relative;} .lf>img{width: 100%;height: 100%;position: absolute;} .hover{width: 150px;height:150px;background: yellow;opacity: .5;position: absolute;display: none;} .rg{width: 400px;height: 400px;position: relative;top: -300px;left: 500px;border: 1px solid gray;overflow: hidden;} </style> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> </head> <body> <div class="lf"> <img src="images/max.jpg"> <div class="hover"></div> </div> <div class="rg"> <img src="images/max.jpg"> </div> <script type="text/javascript"> $(function(){ //鼠标移动上去后hover显示 $(".lf").on("mouseover",function(){ $(".hover").show(); $(".lf").on("mousemove",function(e){ var x=e.clientX-$(".lf").offset().left; var y =e.clientY-$(".lf").offset().top; //判断是否可以移动出去 if(x<=$(".hover").width()/2){ x=$(".hover").width()/2 }else if(x>=$(".lf").width()-$(".hover").width()/2){ x=$(".lf").width()-$(".hover").width()/2 } if(y<=$(".hover").height()/2){ y=$(".hover").height()/2 }else if(y>=$(".lf").height()-$(".hover").height()/2){ y=$(".lf").height()-$(".hover").height()/2 } $(".hover").css({ left:x-$(".hover").width()/2, top:y-$(".hover").height()/2, }) //hover距离容器的水平距离：此容器的宽度=rg里图片左上角开始的距离：图片的宽度 //注意：hover的大小：lf盒子的大小要和rg盒子的大小：图片真实的大小的比值是一样的，否则查看大图的时候会有误差 var lf=$(".rg>img").width()*(x-$(".hover").width()/2)/$(".lf").width(); var rg=$(".rg>img").height()*(y-$(".hover").height()/2)/$(".lf").height(); $(".rg").scrollLeft(lf); $(".rg").scrollTop(rg); }) }) $(".lf").on("mouseout",function(){ $(".hover").hide(); }) }) </script> </body> </html>
注意：图片我用的是800*800的图片，所以盒子和图片的比例一定要注意！