내 일반적인 아이디어는 항상 마우스 좌표를 모니터링하는 것입니다. 마우스가 움직일 때 투명 레이어는 마우스와 함께 움직이고 큰 그림은 투명 레이어의 움직임을 기준으로 움직입니다. 더 이상 고민하지 말고 코드를 살펴보겠습니다.
돋보기<br><meta name="키워드" content=" "><meta name="Description" content=""> <br><style type="text/css"> <br>/*재설정{*/ <br> html{ color:#000;배경:#fff;} <br>body,div{padding:0;margin:0;} <br>img{border:none;} <br>/*}재설정*/ <br> .outer{너비:200px;높이:150px;위치:상대적;마진:20px 자동;} <br>.inner{너비:80px;높이:60px;배경:#f55;위치:절대;불투명도:0.5;필터 : alpha(opacity=50);left:0;top:0;cursor:pointer;} <br>.aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto; 오버플로 :hidden;} <br>.imgs{position:absolute;} <br>.outer img{width:200px;height:150px;} <br></style> <br></head> > <body> <br><div> <br><div class="outer" id="outer"> <br><img src="images/pobabyb.gif" alt="pobaby 작은 picture "/> <br><div class="inner" id="inner"></div> <br></div> <br><div class="aa" id=" aa "> <br><div class="imgs" id="imgs" ><img src="images/pobabyb.gif" alt="pobaby 큰 그림"/></div> <br></div> <br></div> <br><script type="text/javascript"> <br>var external=document.getElementById("outer"); = document.getElementById("inner"); <br>var aa=document.getElementById("aa"); <br>var imgs=document.getElementById("imgs"); false ; <br>inner.onmousedown=test1;//inner를 문서로 변경하고 창의 아무 곳이나 마우스를 클릭하면 그림이 <br>document.onmousemove=test2;//문서가 다음으로 변경됩니다. 외부, 마우스는 외부에 있습니다. <br>document.onmouseup=test3; <br>function test1(event){//마우스를 눌렀을 때만 작동합니다. <br>var event=event || /브라우저 이벤트별로 인식되는 디버깅 호환성이 다릅니다. <br>n=true;//n=true인 경우(n 값은 임의로 설정 가능) 마우스 클릭 이벤트로 가정합니다<br>x= event.clientX-inner.offsetLeft;// 투명 레이어에서 마우스의 상대 가로 좌표 = 마우스 좌표 - 상자의 왼쪽 여백 <br>y = event.clientY-inner.offsetTop; // 투명 레이어의 상대 세로 좌표; 투명 레이어의 마우스 = 마우스 좌표 - 상자의 상단 여백 <br>} <br>function test2(event){//마우스가 움직일 때의 방법 <br>var event=event || 🎜>if(n==true){ <br>////////마우스 이동 범위<br>inner.style.left=event.clientX-x "px" <br>inner.style.top; =event.clientY-y "px"; <br>////////사진 이동 범위<br>imgs.style.left=-4*parseInt(inner.style.left) "px" <br>imgs.style.top=-4*parseInt(inner.style.top) "px" <br>/////////////////////// /////마우스 이동 범위 제한<br>if(parseInt(inner.style.left)< ;0){ <br>inner.style.left=0 <br>} <br> if(parseInt(inner.style.top)<0){ <BR>inner.style.top=0 "px"; <BR>} <BR>if(parseInt(inner.style.left)>outer. clientWidth-inner.clientWidth){ <br>inner.style.left=outer.clientWidth-inner.clientWidth "px "; <br>} <br>if(parseInt(inner.style.top)>outer.clientHeight- inner.clientHeight){ <br>inner.style.top=outer.clientHeight-inner.clientHeight "px" <br>} <br>///////////////// //////////////이미지 이동 범위 제한<br>if(parseInt(imgs .style.left)>0){ <br>imgs.style.left=0 "px "; <br>} <br>if(parseInt(imgs.style.top)>0){ <br>imgs .style.top=0 "px"; <br>} <br>if(parseInt(imgs .style.left)<-4*(outer.clientWidth-inner.clientWidth)){ <BR>imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth) "px"; } <BR>if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight) ){ <BR>imgs.style.top=-4*parseInt(outer.clientHeight-inner. clientHeight) "px"; <BR>} <BR>} <BR>} <BR>function test3(){// 마우스를 놓을 때의 메소드 <BR>n=false; 스크립트> <br></body> <br></html> <br><br><br>
