자바스크립트 돋보기 효과를 만들어 보세요_javascript 스킬-JS 튜토리얼-php.cn

자바스크립트 돋보기 효과를 만들어 보세요_javascript 스킬

WBOY

풀어 주다： 2016-05-16 15:23:31

원래의

1287명이 탐색했습니다.

본 글의 예시에서는 자바스크립트를 기반으로 돋보기 효과를 구현하는 원리와 코드를 소개하고 있으며, 참고하실 수 있도록 공유드립니다.

원칙:

A: 돋보기 B: 작은 그림

C: 큰 사진 가시 영역

D: 큰 그림

마우스 위치는 돋보기 중앙에 있어야 하므로 마우스 위치는 다음과 같습니다.

clientX=A.offsetLeft() B.offsetLeft 1/2*A.offsetWidth;

clientY=A.offsetTop() B.offsetTop 1/2*A.offsetHeight;

마우스 이동 중: 돋보기 A와 큰 그림 D가 마우스에 비례하여 함께 움직입니다. 돋보기 A의 오른쪽 테두리가 작은 그림 B의 오른쪽 테두리와 일치하도록 이동하면 큰 그림 D도 움직여야 하기 때문입니다. 오른쪽으로 테두리가 C의 오른쪽 테두리와 겹치므로 이동 비율은 : (D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a입니다.

HTML 부분:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>放大镜效果</title>

<style>

*{
margin:0;
padding:0; 
}

#demo{
position: relative;
margin:30px 50px;
width: 1000px;
height: 600px;
border: 1px solid #000;
}

#zhezhao{
position: absolute;
z-index:2;
background:red;
width:402px;
height:402px;
left: 20px;
top:20px;
opacity: 0;
}

#small{
position: absolute;
width:402px;
height:402px;
left: 20px;
top:20px;
border: 1px solid #000;
z-index: 1;
}


#small img{
position: absolute;

}


#big{
position: relative;
top: 20px;
left: 460px;
width:500px;
height:500px;
border: 1px solid #000;
overflow: hidden;
display: none;
z-index: 1;
}


#big img{
position: absolute;

}


#glass{
position: absolute;
width:100px;
height: 100px;
opacity: 0.3;
background:orange;
display: none;
}

</style>


</head>


<body>
<div id='demo'>
<div id='zhezhao'> </div> 
<!-- 在ie浏览器中，当鼠标在放大镜上是，浏览器并不认为鼠标同样在小图的div上，所以加个遮罩层 兼容ie-->


<div id='small'> 
<img src='images/small.png' alt=''>
<div id='glass'></div>
</div>
<div id='big'>
<img src='images/big.jpg' alt='' >

</div>

</div>



</body>

</html>

로그인 후 복사

js 부분:

<script>

window.onload=function(){
var demo =document.getElementById('demo');
var small =document.getElementById('small');
var big =document.getElementById('big');
var glass =document.getElementById('glass')
var image =document.getElementById('big').getElementsByTagName('img')[0];
var zhezhao=document.getElementById('zhezhao');

zhezhao.onmouseover=function(){
glass.style.display='block'
big.style.display='block'
}
zhezhao.onmouseout=function(){
glass.style.display='none'
big.style.display='none'
}

//弄清楚clientX，offsetLeft，left的关系，注意区分
zhezhao.onmousemove=function(ev){
var event=ev
var left=event.clientX-demo.offsetLeft-small.offsetLeft-glass.offsetWidth/2;
var top =event.clientY-demo.offsetTop -small.offsetTop -glass.offsetHeight/2;
if(left<0){
left=0;
}else if(left>(small.offsetWidth-glass.offsetWidth)){
left=small.offsetWidth-glass.offsetWidth
}

if(top<0){
top=0;
}else if(top>(small.offsetHeight- glass.offsetHeight)){
top=small.offsetHeight- glass.offsetHeight
}
glass.style.left =left+'px';
glass.style.top =top+'px';

 

var percent=(image.offsetWidth-big.offsetWidth)/(small.offsetWidth-glass.offsetWidth)

image.style.left=-percent*left+'px'
image.style.top =-percent*top+'px'



}
}

</script>

로그인 후 복사

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 돋보기 효과를 구현하시는 모든 분들께 도움이 되었으면 좋겠습니다.