<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #smPic{ float:left; position:relative; 400px; height:225px; margin-left:100px; margin-top:100px; } #smPic img{ 400px; height:225px; } #smPic #drag{ position:absolute; left:0; top:0; background:rgba(0,0,0,0.5); 80px; height:45px; display:none; } #bigBox{ float:left; position:relative; 400px; height:225px; overflow:hidden; display:none; margin-top:100px; } #bigPic{ position:absolute; left:0; top:0; 2000px; height:1125px; } </style> </head> <body> <div id="smPic"> <img src="img/1.jpg" alt="" /> <div id="drag"></div> </div> <div id="bigBox"> <img src="img/1.jpg" alt="" id="bigPic" /> </div> <script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#smPic").bind({ "mouseover":function(){ $("#drag").css("display","block"); $("#bigBox").css("display","block"); }, "mousemove":function(e){ var event = e||window.event; var oLeft = event.pageX-($("#drag").outerWidth()/2); var oTop = event.pageY-($("#drag").outerHeight()/2); var smPicLeft = $("#smPic").offset().left; var smPicTop = $("#smPic").offset().top; var nowLeft = oLeft - smPicLeft; var nowTop = oTop - smPicTop; console.log(nowLeft) if(nowLeft<=0){ nowLeft = 0; }else if(nowLeft>=($("#smPic").outerWidth()-$("#drag").outerWidth())){ nowLeft = $("#smPic").outerWidth()-$("#drag").outerWidth(); } if(nowTop<=0){ nowTop = 0; }else if(nowTop>=($("#smPic").outerHeight()-$("#drag").outerHeight())){ nowTop = $("#smPic").outerHeight()-$("#drag").outerHeight(); } $("#drag").css({"left":nowLeft,"top":nowTop}); $("#bigPic").css({"left":(-nowLeft*5),"top":(-nowTop*5)}); } , "mouseout":function(){ $("#drag").css("display","none"); $("#bigBox").css("display","none"); } }) </script> </body> </html>