멋진 자바스크립트 그림 돋보기_이미지 특수 효과

Flash에서는 마스크와 몇 가지 간단한 스크립트를 사용하여 동적 그림 돋보기를 만들 수 있습니다. 이제 우리는 CSS 언어와 결합된 JavaScript만을 사용하여 이 효과를 쉽게 얻을 수 있습니다.

　제작 아이디어 : '확대' 이미지의 원본인 '돋보기' 뒤에 배경 이미지가 있습니다. 확대해야 할 부분이 정확하게 표시되도록 "돋보기"를 이동할 때 배경 이미지의 위치를 ​​적절하게 조정합니다.

　효과 시연: (새 창에서 보려면 여기를 클릭하세요)

　제작 단계:

1) 먼저 내용은 동일하고 크기가 다른 두 장의 사진을 준비합니다. 여기에는 400×300픽셀의 썸네일 small_hill.gif와 800×600픽셀의 큰 사진 big_hill.gif가 있습니다. 그런 다음 "돋보기" 그림을 준비합니다. 여기서는 녹색 상자 뷰어를 준비했습니다.

2) 다음 코드를 작성합니다.

다음은 레이어로 사용되는 두 그림에 대한 코드입니다. 첫 번째는 썸네일이고, 두 번째는 "돋보기"입니다. 먼저 배경을 보이지 않는 위치로 이동합니다. 여기서 "onclick="moveme=!moveme""는 클릭할 때마다 부울이 발생함을 의미합니다. "moveme" 값이 변경되었습니다.

"small_hill.gif" id="bgLayer" style= "위치:절대; 왼쪽:150px; 위쪽:50px;">
"viewer.gif" id="myviewer" onclick="moveme=!moveme" onmousemove="viewit (이)"
style="왼쪽:0;상단:0;배경-반복:없음-반복; 배경-위치:2000px 2000px;위치:절대;" >

다음은 JavaScript 스크립트입니다.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>