쇼핑 웹 사이트의 제품 페이지에는 종종 제품 디스플레이 영역이 있습니다. 이 그림 영역의 한 가지 기능은 제품 사진의 배율 기능입니다. 왼쪽의 초점 영역을 이동하여 세부 사항을 확대하고 세부 사항을보십시오. 세부 사항은 다음과 같습니다. 이 기능을 구현하는 방법도 매우 간단합니다.
실험 : 제품 초점의 확대 이미지 만들기.
필수 기술 :
1. 페이지 요소를 얻는 기본 방법;
2. 몇 가지 간단한 사건;
3. DOM을 사용하여 요소의 속성을 설정합니다.
사례 원칙 :
1. 포커스 박스의 마우스 이벤트를 따르십시오.
2. 포커스 박스의 움직이는 영역에 대한 규정;
3. 큰 상자의 내용 표시;
적합 : JS 초보자
-------------------------------------------------------------------시작! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. 먼저 CSS 스타일을 준비합니다. CSS 스타일에주의를 기울여야하는 몇 가지 사항은 다음과 같습니다.
(1) 포커스 맵은 위치, 기본 디스플레이와 관련이 있습니다.
(2) 오른쪽의 큰 이미지를 보여주는 상자 (이하 큰 이미지 프레임이라고 함) 기본 디스플레이 : 없음; 큰 이미지 프레임의 내용은 오버플로 후에 숨겨져야합니다.
2. 스크립트 코드 작성 시작 :
(1) 먼저 페이지 요소 가져 오기 :
// 우선, 요소 함수 getID (tag)를 작동합니다. return document.getElementById (tag)} var box = getId ( "box"); var small = getid ( "small"); var mask = getid ( "마스크"); var big = getid ( "big"); var pic = big.children [0]; // 노드 메소드를 통해 요소를 가져 오는 것입니다
(2) 마우스가 작은 그림으로 이동할 때 두 가지 이벤트가 나타나는지 확인하십시오. 1) 포커스 상자를 표시해야합니다. 2) 큰 그림 상자가 표시되어야합니다. 마찬가지로, 마우스를 제거한 후,이 두 잎은 취소되어야합니다.
// 마우스를 사진으로 이동할 때 두 가지 효과가 나타납니다. big.style.display = "블록"; } small.onmouseout = function () {mask.style.display = "none"; big.style.display = "none"}(3) 초점 박스의 다음을 설정하십시오.
1) 포커스 상자가 설정되면 다음 시간이 사실이므로 여기의 이벤트 유형은 onmouseover가 아닙니다. 그러나 onmousemove;
2)이 코드와 관련된 문제는 주로 마스크 (포커스 박스) 포지셔닝 계산 문제입니다. 무시하기 쉬운 문제는 마스크가 누구의 위치가 움직이는가? 내 CSS 스타일에서 마스크는 작은 상자에 배치되므로 상대적으로 이동 위치는 위치가 작은 상위 요소의 위치 여야합니다. 따라서 브라우저의 현재 창에 비해 ClientX 및 클라이언트와 함께하는 위치 좌표는 직접 사용할 수 없으며 부모 상자의 마진 값의 영향을 빼야합니다.
// 작은 이미지의 초점 상자를 설정하고 마우스를 따르십시오. small.onmousemove = function (e) {var marginl = box.offsetleft; // OffSetLeft 메서드를 사용하여 상자의 마진 왼쪽을 얻습니다. var margint = box.offsetTop; // OffSetTop 메서드를 사용하여 Box의 마진 탑을 얻습니다. var currentx = e.clientx; var currenty = e.clienty; // 브라우저의 왼쪽 상단 모서리에 대한 E.Clinety 및 E.Clinety를 사용하여 var x = currentx-marginl-mask.offsetwidth/2; var y = currenty-margint-mask.offsetheight/2; // 포커스 상자의 중앙을 마우스와 정렬하려면 포커스 폭과 높이의 절반을 빼야합니다. 상자/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) 유휴 초점 상자의 위치의 움직임
1) 이전 단계가 완료되면 포커스 박스의 움직임은 유휴 상태가 아닙니다. 쇼핑 웹 사이트를 탐색하는 과정에서, 우리는 포커스 박스가 작은 그림 밖에서 움직일 수 없으므로 사용자 경험이 좋지 않다고 생각할 수 있습니다.
2) 포커스 박스의 이동을 제한하기 위해, 주로 X와 Y 변화가 허용 값을 초과 할 때, 고정 값을 제공합니다.
// 작은 이미지의 초점 상자를 설정하고 마우스를 따르십시오. small.onmousemove = function (e) {var marginl = box.offsetleft; var margint = box.offsetTop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth/2; var y = currenty-margint-mask.offsetheight/2; // (x <0) {x = 0;} if (x> small.offsetwidth-mask.offsetwidth) {x = small.offsetwidth-mask.offsetwidth}; // 포지셔닝에 사용되는 X의 최소값은 0이고 최대 값은 작은 마스크 길이 y 축입니다. if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offseight-mask.offsetheight}; mask.style.left = x+"px"; // 이동 영역이 이동 영역이 지정된 후 작성되었으며 코드 마스크의 실행 순서에주의를 기울입니다.(5) 큰 이미지의 표시를 설정합니다
1) 큰 상자에서 그림의 움직임을 깨닫기 위해서는 -margin 값을 생각해야합니다.
2) 얼마나 많은 거리를 이동할 수 있는지 마스크의 왼쪽과 상단 값에 고정 비율을 곱하는 데 사용될 수 있습니다. 초점 영역의 왼쪽 상단에 표시된 위치를 생각해보십시오. 큰 이미지 프레임의 왼쪽 상단 모서리는 동일합니다! ! ! 이것은 이해하기 어렵지 않습니다.
// 큰 상자에 표시된 컨텐츠를 Big Box var relativex = mask.offsetleft; var regalivey = mask.offsetTop; var proporationx = pic.offsetwidth/small.offsetWidth; // 비율을 설정 var proporationy = pic.offsetheight/small.offsetWidth; pic.style.marginleft = -relativex*proporationx+"px"; //메모! 마진의 값은 "px는 pic.style.margintop = -relativey*proporationy+"px ";
이 시점에서 우리의 데모는 완료되었습니다! 매우 간단하지 않습니다
나는 당신과 논의하고 의사 소통하기 위해 아래 전체 코드를 붙여 넣을 것입니다.
CSS 코드는 다음과 같습니다
<스타일> * {마진 : 0; 패딩 : 0; } #box {마진 : 50px; } #small {너비 : 229px; 높이 : 250px; 국경 : 1px 솔리드 블랙; 텍스트 정렬 : 센터; 위치 : 상대; 플로트 : 왼쪽; } #mask {너비 : 100px; 높이 : 100px; 배경색 : RGBA (214, 111, 193, 0.3); 위치 : 절대; 상단 : 0; 왼쪽 : 0; /*디스플레이 : 없음;*/} #Big {너비 : 350px; 높이 : 350px; 국경 : 1px 솔리드 블랙; 플로트 : 왼쪽; 오버플로 : 숨겨진; /*디스플레이 : 없음;*/} </style>여기 HTML입니다
<body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/<div id = "mask"> </div> </div> <div id = "big"> <img src = "big_img.jpg"/> </div>
JS 코드는 다음과 같습니다
<cript> // 우선, 작동 할 요소 getId (tag) {return document.getElementById (tag)} var box = getId ( "box"); var small = getid ( "small"); var mask = getid ( "마스크"); var big = getid ( "big"); var pic = big.children [0]; Console.log (PIC); // 마우스가 그림으로 이동하고 두 가지 효과가 작게 나타납니다. big.style.display = "블록"; } small.onmouseout = function () {mask.style.display = "none"; big.style.display = "none"} // 작은 이미지의 초점 상자를 설정하고 마우스를 따르십시오. small.onmousemove = function (e) {var marginl = box.offsetleft; var margint = box.offsetTop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth/2; var y = currenty-margint-mask.offsetheight/2; // (x <0) {x = 0;} if (x> small.offsetwidth-mask.offsetwidth) {x = small.offsetwidth-mask.offsetwidth}; if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offsetheight-mask.offsetheight}; mask.style.left = x+"px"; mask.style.top = y+"px"; // 큰 상자에 표시된 컨텐츠를 var relativex = mask.offsetleft; var regalivey = mask.offsetTop; var regalivey = mask.offsetTop; var proporationx = pic.offsetwidth/small.offsetWidth; var proporationy = pic.offsetheight/small.offsetwidth; pic.style.marginleft = -relativex*proporationx+"px"; pic.style.margintop = -relativey*proporationy+"px"; } </스크립트>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.