결과를 얻을 수 :
그림으로 1. 마우스 돋보기 표시 마우스 잎 (효과 사라짐)시 상세도는 아무것도 표시되지
중간체 2. 마우스하고 돋보기 돋보기 마우스에 의해 이동
3. 돋보기도 컬럼 카트리지를 축소 할 수있다.
(4). 상세지도 상세지도에 마우스를 사라
구현 세부 정보 :
1. 동안 큰 상자도 세부의 상자의 폭보다 작은, 그러나 논리적으로 상자 큰 상자의 상세보기에 속하는
일반적으로 다음과 같은 텍스트 상자가 있기 때문에, 사용하실 수 없습니다도 플로트 상세 2
도 세부의 부모를 찾습니다 3. 상자를. 상자
십자형 선택 4. 돋보기 마우스
사진 화상 이동하도록 배치 5.
6. VAR의 EVT = 이벤트 || window.event를하는 단계; // 호환성 표현은
비율에 따른 카세트의 위치를 정점 돋보기를 찾는 제 화상의 위치를 표시하는 이미지
도 마이너스 상세히 위치 8. 이미지
코드 :
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 캐릭터 = "UTF-. 8">
<TITLE> jingdong 돋보기 </ TITLE>
<스타일>
.box {/ * 큰 상자 비록도 2의 세부의 비율. 박스의 폭은 작지만, 논리적 상자 큰 상자 * /의 상세도에 속하는
폭 : 350px;
신장 350px;
총수 : 상대;
마진 : 100 픽셀,
테두리 : 1 픽셀 고체 #aaa;
}
.box .detailed {/ *도 상세이다. 일반적으로 다음과 같은 텍스트 * / 카세트가 있으므로 유동이 이용 될 수없는
폭 : 450 픽셀,
높이 450 픽셀,
테두리 : 1 픽셀 고체 #aaa;
총수 : 절대;
오버플 : 숨김;
남아 365px; / * 박스가 상위에 배치된다 * /
위쪽 : 0;
/ * 초기 세트 보이지 * /
디스플레이 : 없음;
}
.Normal의 .magnfier {호출 .box
폭 : 150 픽셀,
높이 150 픽셀;
최고 : 0;
좌측 : 0]
의 위치는 절대;
배경색 (0, 0, 255, 0.2) RGBA / * 또한 투명성 * / 설정하는데 사용 불투명 일 수
커서로 이동하는 단계; 크로스 * / 선택 / * 마우스
디스플레이 : 없음; / * 설정 초기 보이지 * /이
}
화상이 동화상 * / 일으키는 위치 / * IMG {.detailed
총수 : 절대;
위쪽 : 0;
왼쪽 : 0;
}
</ 스타일>
<script>
함수 $ (ID) {
document.getElementById를 (ID)를 반환;
}
창로드 = 함수 () {
VAR = $ 박스 ( '박스')
; VAR [0] 일반 box.children =
VAR의 margnfier의 normal.children =. 1]을 // 돔 객체의 돋보기를 얻을 document.getElementsByClassName를 얻을 수 있습니다.
상세한 VAR box.children = [1]; // DOM 객체도 ( '확대') document.getElementsByClassName 사용할 수있는 미리보기 이미지를 얻을 [0 ];
box.children detailedImg VAR = [1] .children [0]
normal.onmouseover = 함수 () {// 이동이 사라지지 않을 것이다 상세한지도 상세도이다 빨리 이벤트 등록 또는 onmousever 상자를 제공 할 수없는,
margnfier.style = .display '블록';
detailed.style.display = '블록';
}
normal.onmouseout = 함수 () {
margnfier.style.display = '없음';
detailed.style.display = '없음';
}
VAR X = 0;
VAR Y = 0;
// 제어부 이동 통상 내부에 확대 줌
normal.onmousemove를 = 함수 (이벤트) {
VAR EVT 이벤트 = || window.event를;
// 호환성 기입
X = evt.clientX - 박스. offsetLeft - margnfier.offsetWidth / 2,
Y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2]
// 마우스를 분석하여 정상 플로우 영역 아니다
IF (X <0) {
X = 0;
{}는 다른
IF (X> box.offsetWidth - margnfier.offsetWidth) {
X = box.offsetWidth - margnfier.offsetWidth;
}
}
(Y <0) {IF
Y = 0;
}는 다른 {
IF (Y> box.offsetHeight - margnfier.offsetHeight) {
Y = box.offsetHeight - margnfier.offsetHeight;
}
}
margnfier.style.left = X + 'PX';
margnfier.style.top = Y + 'PX';
VAR detailedX -X- * = 800 /를이 .offsetWidth;
VAR detailedY -Y * = 800 / this.offsetHeight;
의 비율에 따른 카세트 돋보기 // 정점 위치가 이미지를 표시하는 이미지 위치를 발견
// 화상의 위치를 변경
detailedImg.style.left = detailedX + 'PX ';
detailedImg.style.top detailedY + ='PX를 ';
}
}
</ script>
</ head>
<BODY>
<DIV ID = "상자"클래스 = "상자"> <! -包含详细图和缩略图的盒子->
<div 클래스 = "정상">
<IMG SRC = "imgs / show.jpg" ALT = "">
<DIV 클래스 = "magnfier"> </ DIV>
</ DIV>
<DIV 클래스 = "설명">
<IMG SRC = "imgs / detail.jpg"ALT = "">
</ DIV>
< / div>
</ BODY>
</ HTML>