js를 사용하여 돋보기 효과를 구현하는 예제 코드

< 스타일 & gt;
*{
여백: 0px;
패딩: 0px;
}
#Box {
너비: 430px;
여백:
여백 높이: 17%; 다른 요소가 위치 지정을 위해 이 요소에 의존할 수 있도록 여기에 상대 위치 지정
}
#move{
background-color:green;
width:220px;
height:220px;
position:absolute;
left:0px;
top: 0px;
display:none;//먼저 숨기고 js를 사용하여 표시합니다
}
#bimg{
width:430px;
height:430px;
Overflow:hidden;
position:absolute;
top: 0px;
left:450px;
display:none;//먼저 숨기고 js를 사용하여 표시합니다
}
#bimg img{
width:800px;
height:800px;
position:absolute;
top:0px ;
left: 0px;
}

<script><br> function bigimg(){<br> var bbox = document.getElementById("box" );<br> var bmove = document.getElementById("move");<br> var bbimg = document.getElementById("bimg");<br> var b_bimg = document.getElementById("b_bimg");<br> bbox.onmouseover = function(){ //이동 상자에 마우스를 올리면 큰 그림과 선택 상자가 표시됩니다<br>bbimg.style.display = "block";<br>bmove.style.display="block";<br> }<br> bbox.onmouseout = function(){//마우스 마우스 상자를 열고 큰 그림과 선택 상자를 표시하지 마십시오<br>bbimg.style.display = "none";<br>bmove.style.display="none";<br> }<br> bbox.onmousemove = function(e){//Get the 마우스 위치<br>var x = e.clientX;//뷰포트를 기준으로 한 마우스의 위치<br>var y = e.clientY;<br>var t = bbox.offsetTop;//뷰포트를 기준으로 한 상자의 위치<br>var l = bbox.offsetLeft;<br>var _left = x - l - bmove.offsetWidth/2;//이동 위치 계산<br>var _top = y - t -bmove.offsetHeight/2;<br>if(_top<=0)/ /상자 상단으로 슬라이드<br/> _top = 0;<br/>else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//상자 하단으로 슬라이드<br> _top = bbox.offsetHeight-bmove.offsetHeight ;<br>if (_left<=0)//상자 맨 왼쪽으로 슬라이드 <br/> _left=0;<br/>else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//상자 맨 오른쪽으로 슬라이드 <br> _left=bbox. offsetWidth-bmove.offsetWidth ;<br>bmove.style.top = _top +"px";//이동 위치 설정<br>bmove.style.left = _left + "px";<br>var w = _left/(bbox.offsetWidth -bmove.offsetWidth);//이동 비율 계산<br>var h = _top/(bbox.offsetHeight-bmove.offsetHeight);<br>var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//계산 큰 그림의 위치<br>var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w ;<br>b_bimg.style.top = -b_bimg_top + "px";//큰 이미지의 위치 정보를 설정합니다<br>b_bimg.style. left = -b_bimg_left + "px";<br> }<br><br> }<br> </script>
< ;/body>

검은색 화살표:

橙色箭头：

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围：

move块现在的坐标占可移动范围的比例：

bimg的移动范围：

bimg的位置：

🎜🎜주황색 화살표: 🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜1🎜🎜2🎜🎜🎜 🎜🎜var _left = x - l - bmove.offsetWidth/2;//계산 이동 위치 🎜🎜var _top = y - t -bmove.offsetHeight/2;🎜🎜 🎜🎜🎜 🎜🎜🎜🎜2. bimg 블록 계산🎜🎜이동 범위 내 이동 블록의 비율을 사용하여 큰 그림의 위치 설정🎜🎜이동 블록의 이동 범위: 🎜🎜🎜🎜 🎜🎜 🎜🎜🎜🎜1🎜🎜🎜 🎜🎜bbox.offsetWidth-bmove.offsetWidth🎜🎜🎜🎜🎜🎜🎜🎜🎜비율에 대한 이동 블록 계정의 현재 좌표 이동 가능 범위: 🎜🎜🎜🎜 🎜🎜🎜 🎜🎜🎜1🎜🎜2🎜🎜🎜🎜🎜var w = _left /(bbox.offsetWidth-bmove.offsetWidth);<code class="js comments">//움직임 비율 계산🎜🎜var h = _top /(bbox.offsetHeight-bmove.offsetHeight);🎜🎜🎜🎜🎜🎜🎜🎜🎜bimg의 이동 범위: 🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜1🎜🎜🎜 🎜🎜b_bimg.offsetHeight-bbimg.offsetHeight🎜🎜🎜🎜🎜🎜🎜🎜🎜bimg 위치: 🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜1 🎜🎜2🎜 🎜🎜🎜🎜var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//계산 큰 그림의 위치🎜🎜var b_bimg_left = (b_bimg .offsetWidth-bbimg.offsetWidth)*w;🎜🎜🎜🎜🎜🎜🎜🎜