···css #small{ width: 500px; height: 500px; border: 1px solid #ccc; overflow: hidden; position: relative; } #big{ width: 1024px; height: 683px; background-image: url(./images/6.jpg); position: absolute; } ···
···js // 获取外面的元素 var small=document.getElementById("small") // 获取拖拽的元素 var big=document.getElementById("big") // x,y为鼠标相对于拖拽元素的坐标 // distanceX,distanceY为拖拽元素的left和top值 let x,y,distanceX,distanceY,flag=false // maxX为x方向移动的最大值 let maxX=big.offsetWidth-small.offsetWidth // maxY为y方向移动的最大值 let maxY=big.offsetHeight-small.offsetHeight big.addEventListener("mousedown",function(e){ flag=true e=e||window.event x=e.pageX-big.offsetLeft y=e.pageY-big.offsetTop },0) window.addEventListener("mousemove",function(e){ e=e||window.event if(flag){ distanceX=e.pageX-x distanceY=e.pageY-y if(distanceX>0){ distanceX=0 }else if(distanceX<-maxX){ distanceX=-maxX } if(distanceY>0){ distanceY=0 }else if(distanceY<-maxY){ distanceY=-maxY } big.style.left=distanceX+"px" big.style.top=distanceY+"px" } },0) window.addEventListener("mouseup",function(e){ flag=false },0) ···
<div id="small">
<div id="big></big>
</dov>
