이 효과는 어렵지 않습니다. 핵심은 위치와 비율을 설정하는 것입니다.
마우스 위치 캡처, 마우스 위치 영역 결정 및 onmouseover 이벤트, onmousemove 이벤트, onmouseout 이벤트
큰 그림의 비율을 설정합니다. 작은 그림에 표시되는 잘라낸 그림의 비율은 정확해야 하며 바람직하게는 2배 또는 4배입니다.
주로 너비에 주의하세요. 여기에 있는 사진 m.jpg는 1440X900입니다....
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>돋보기 효과</title>
<스타일 유형="텍스트/css">
*{여백:0;패딩:0;}
#smallimg{width:360px;float:left;position:relative;border:1px 단색 빨간색;}
#smallimg img{너비:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{너비:100px;높이:100px;배경:#fff;커서:이동;위치:절대;테두리:1px 단색 #666;불투명도:0.5;필터:알파(불투명도=50);디스플레이:없음;}
</style>
</head>
<본문>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<스크립트 유형="텍스트/자바스크립트">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//이미지 필터링
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = 함수(){
showimg.style.display = "차단";
bigimg.style.display = "인라인";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//위 두 변수는 showimg가 활성화될 수 있는 영역을 나타냅니다.
};
smallimg.onmousemove = 함수(e){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var 왼쪽 = e.clientX - smallimg.offsetLeft - show_half;
//현재 이동된 showimg 위치를 구하는 계산 방법은 마우스 좌표 - 가장 바깥쪽 컨테이너의 좌표 - 상자의 너비(높이)/2
상단 = 상단<0?0:상단>최대 높이?최대 높이:상단;
왼쪽 = 왼쪽<0?0:왼쪽>최대 너비?최대 너비:왼쪽;
showimg.style.top = 상단 + "px";
showimg.style.left = 왼쪽 + "px";
bigimg.style.Background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = 함수(){
showimg.style.display="없음";
bigimg.style.Background="";
bigimg.style.display="없음"
};
</script>
</body>
</html>