처음으로 블로그를 게시했을 때 조금 흥분했습니다. 나는 지금 Tianjin에 있습니다. 나는 앞으로 프론트 엔드 산업에서 일하기를 희망하며 오랫동안 공부할 수 없을 것입니다. 학습 과정과 이익을 기록하기 위해 나는 물론 통합입니다. 내가 쓰는 것은 큰 황소만큼 키가 크지 않지만 기본적인 내용 일뿐입니다. 물론, 나는 또한 좋은 기사를 수집 할 것입니다 (실제로는 가장 이해할 수 있습니다 ...). 나는 미래에 고급 무언가를 쓸 수 있다고 생각합니다. 어서 해봐요!
나는 조금 말도 안되는 말을하고 심각한 문제에 대해 이야기합니다. 며칠 전, 나는 Tanzhou Education의 교육 비디오를 보았습니다. 교사는 jquery를 사용하여 돋보기의 효과를 달성했습니다 (교사는 너무 느리다고 말하고 뛰어 다니면서보고 있다고 말했습니다). jQuery를 잘 배웠지 만 기본 코드는 여전히 이해할 수 있기 때문에 현재 배우고있는 JS와 함께 연습하고 싶고 마침내이 효과를 성공적으로 달성했습니다.
아이디어 : 먼저 이동 블록과 BIMG 블록이 숨기도록하십시오. 마우스가 상자로 이동하면 이동 블록 및 BIMG 블록이 표시되고 마우스의 현재 위치가 얻어집니다. 그런 다음 계산 후, 이동 블록 및 BIMG 블록에 대한 적절한 값은 확대 유리 효과를 달성하기 위해 주어진다 (이동 블록 및 BIMG 블록의 위치의 계산은 나중에 상세하다).
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 돋보기 </title> <link href = "css/bigimg.css"rel = "Stylesheet"/> <script src = "js/bigimg.js"> </head> </head> </head> onload = "bigimg ()"> <div id = "box"> <img src = "images/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "images/bimg.jpg"> </div> </html> </html> </html>
CSS 스타일 :
*{마진 : 0px; 패딩 : 0px;}#box {너비 : 430px; 높이 : 430px; 여백 : 100px; 마진 왼쪽 : 17%; 위치 : 상대; // 다른 요소 가이 요소에 위치하여 위치에 의존 할 수 있도록 상대 위치를 사용하십시오} #move {background-image : url (../ images/move.png); 너비 : 220px; 높이 : 220px; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; 디스플레이 : 없음; // 먼저 숨기고 js를 사용하여 표시} #bimg {너비 : 430px; 높이 : 430px; 오버플로 : 숨겨진; 위치 : 절대; 상단 : 0px; 왼쪽 : 450px; 디스플레이 : 없음; // 먼저 숨기고 js를 사용하여 표시} #bimg img {너비 : 800px; 높이 : 800px; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px;}자바 스크립트 :
함수 bigimg () {var bbox = document.getElementById ( "box"); var bmove = document.getElementById ( "move"); var bbimg = document.getElementById ( "bimg"); var b_bimg = document.getElementById ( "b_bimg"); bbox.onmouseOver = function () {// 마우스를 상자로 이동하여 큰 그림을 표시하고 상자를 선택합니다. bbimg.style.display = "block"; bmove.style.display = "블록"; } bbox.onmouseout = function () {// mouseMove는 마우스 bbimg.style.display = "none"에서 상자가 멀리 이동하면 큰 그림과 확인란을 표시하지 않습니다. bmove.style.display = "none"; } bbox.onmouseMove = function (e) {// 마우스 위치 가져 오기 var x = e.clientx; // 뷰포트에 대한 마우스의 위치 var y = e.clienty; var t = bbox.offsetTop; // 뷰포트에 대한 상자의 위치 var l = bbox.offsetleft; var _left = x -l -bmove.offsetwidth/2; // 이동 위치를 계산 var _top = y -t -bmove.offSetheight/2; if (_top <= 0) // box_top = 0의 상단으로 슬라이드; else if (_top> = bbox.offsetheight-bmove.offSetheight) // box_top = bbox.offSetheight-bmove.offSetheight; if (_left <= 0) // box_left = 0의 왼쪽으로 슬라이드; else if (_left> = bbox.offsetwidth-bmove.offsetWidth) // box_Left = bbox.OffSetWidth-bmove.OffSetWidth의 가장 오른쪽으로 슬라이드합니다. bmove.style.top = _top + "px"; // 움직임의 위치를 설정 bmove.style.left = _left + "px"; var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // 이동 비율 계산 var h = _top/(bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offSetheight-bbimg.offsetheight)*h; // 큰 이미지의 위치를 계산합니다 var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w; b_bimg.style.top = -b_bimg_top + "px"; // 큰 이미지의 위치 정보를 설정합니다. }}생식 이미지 :
1. 이동 블록 계산
검은 색 화살표 :
var x = e.clientx; // 뷰포트에 대한 마우스의 위치 var y = e.clienty;
빨간색 화살표 :
var t = bbox.offsetTop; // 뷰포트에 대한 상자 위치 var l = bbox.offsetleft;
오렌지 화살표 :
var _left = x -l -bmove.offsetwidth/2; // 이동 위치를 계산 var _top = y -t -bmove.offsetheight/2;
2. BIMG 블록 계산
이동식 범위 내에서 이동 블록의 스케일을 사용하여 큰 이미지의 위치를 설정하십시오.
이동 블록의 이동 범위 :
bbox.offsetwidth-bmove.offsetwidth
이동 블록의 현재 좌표는 이동식 범위를 설명합니다.
var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // 이동 비율 계산 var h = _top/(bbox.offsetheight-bmove.offsetheight);
BIMG의 운동 범위 :
b_bimg.offsetheight-bbimg.offsetheight
BIMG의 위치 :
var b_bimg_top = (b_bimg.offSetheight-bbimg.offsetheight)*h; // 큰 이미지의 위치를 계산합니다 var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w;
돋보기 유리의 효과를 달성하기 위해 JS를 사용하는 위의 간단한 예는 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.