jquery_jquery를 기반으로 한 제품 표시 돋보기

코드만 업로드하세요(총 비용은 100입니다, 작은 것)

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
_el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) "px";
_el("biggerPic").style.marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el ("container").style.height))) "px";
$("#oriImage").bind('mouseleave', function(event) {
_el("biggerPic" ).style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) "px"
_el("biggerPic ").style .marginTop = (0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) "px";
});
$ ("#oriImage").bind('mouseover', function(event) {
$("#oriImage").bind('mousemove', function(event) { // 마우스 이동 후 작업 레이어 LazyBind 마우스 이동 이벤트
var mouseX, mouseY
if (navigator.userAgent.indexOf("MSIE 6.0") >= 0) { //IE6 이상 버전 및 GOOGLE 브라우저
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
} else {//FF 브라우저에서는 픽셀을 오프셋 단위로 추가해야 하며 다른 단위는 추가하지 않습니다.
mouseY = _offsetY(event, "oriImage");
mouseX = _offsetX(event, "oriImage");
}
var playOffsetX = 0 - mouseX / _xPercent(_el("oriImage") .style.width, _el("biggerPic").style.width);
var playOffsetY = 0 - mouseY / _yPercent(_el("oriImage").style.height, _el("biggerPic").style.height );
//큰 이미지의 X 좌표가 0보다 큰 경우, 즉 이미지의 X 오프셋이 표시된 컨테이너를 초과하면 0으로 재설정됩니다. X 오프셋으로 재설정합니다.
if (playOffsetY < 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el(") 간의 차이의 음수입니다. 컨테이너").style.height)) - getOffsetNumber( _el("container").style.height) / 2
&& playOffsetX > 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber (_el("container").style.width) )) {
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 "px" :
playOffsetX getOffsetNumber(_el("container" ).style.width) / 2 > 0 ? 0 "px" : playOffsetX getOffsetNumber(_el("container").style.width) / 2 "px"
return; /큰 그림의 Y 좌표가 0보다 크면 도달한 것을 의미합니다. 그림의 Y 오프셋이 표시된 컨테이너를 초과하면 차이의 음수로 재설정됩니다. 그림과 컨테이너 사이
if (playOffsetX < 0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width)) - getOffsetNumber(_el( "container").style.width) / 2
&& playOffsetY > 0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height))) {
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 "px" :
playOffsetY getOffsetNumber(_el("container").style.height) / 2 > px" : playOffsetY getOffsetNumber(_el("container").style.height ) / 2 "px";
return;
}
if (playOffsetY >= 0 - (getOffsetNumber(_el("biggerPic) ").style.height) - getOffsetNumber(_el("container") .style.height)) - getOffsetNumber(_el("container").style.height) / 2
&& playOffsetX >= 0 - (getOffsetNumber (_el("biggerPic").style.width) - getOffsetNumber(_el ("container").style.width)) - getOffsetNumber(_el("container").style.width) / 2) {
// Alert(0 - (getOffsetNumber(_el("biggerPic").style.height) - getOffsetNumber(_el("container").style.height)) - getOffsetNumber(_el("container").style.height) / 2) ;
_el("biggerPic").style.marginLeft = playOffsetX > 0 ? 0 "px" :
playOffsetX getOffsetNumber(_el("container").style.width) / 2 > px": playOffsetX getOffsetNumber(_el("container").style.width ) / 2 "px";
_el("biggerPic").style.marginTop = playOffsetY > 0 ? 0 "px" :
playOffsetY getOffsetNumber(_el("container").style.height) / 2 > 0 ? 0 "px" : playOffsetY getOffsetNumber(_el("container").style.height) / 2 "px";
}
반환
})


글쎄, 위의 내용은 기본적으로 일반적인 논리입니다. 여기에 약간의 설명이 있습니다.

1 이제 이 기능은 FF3.0과 호환됩니다. IE 6,
7, 8과 크롬, 기타 테스트할 시간이 없었음

2 개발 중 확대된 이미지, 즉 ID가 bigPic인 이미지를 이동할 때 특별해야 할 때 테두리
처리, 왼쪽과 위쪽은 매우 간단합니다. 0으로 되돌리면 됩니다. 그러나 오른쪽과 아래쪽은 조금 더 번거롭습니다. 현재
이미지의 오프셋을 계산해야 합니다. 컨테이너(즉, 컨테이너 ID가 있는 DIV)는 다음과 같습니다. 문제는
고정 값을 사용하여 컨테이너에서 이미지의 상단 또는 오른쪽 여백을 다시 덮으려는 경우 사용자가 탐색할 때
와 같은 "프레임 건너뛰기" 현상이 나타납니다. 그 이유는 현재 이미지의 오프셋을 결정할 때 작업 컨테이너(즉, DIV)를 기준으로 마우스의 거리를 사용했기 때문입니다. ID "oriImage")를 판단 조건으로 사용했지만 나중에 이 접근 방식이 충분히 정확하지 않다는 것을 발견했습니다.
실제로 "프레임 건너뛰기"가 발생하므로 이 계획은 폐기되었습니다. 지금 사용되는 방법은 마우스 위치를 별도로 판단하는 것입니다.
다른 논리를 실행하는 코드가 명확하게 작성되었습니다.

3 페이지가 로드되고 마우스가 작업 레이어를 벗어날 때 큰 이미지의 위치가 오른쪽 하단으로 설정되는 이유는
에서 언급한 "프레임 건너뛰기"를 방지하기 위한 것입니다. 두 번째 점은 조건부 판단을 사용하는 경우입니다. 사용자가 처음으로 마우스 이동
이벤트를 실행할 때 사용자가 작업 레이어의 오른쪽이나 아래쪽에서 입력하면 잘못된 표시가 발생할 수 있습니다. > 인터넷 로딩시 돋보기 레이어가 직접 숨김으로 설정되어 있는 이유가 아직은 버그입니다
누군가가 올바른 방법을 지적해 주셨으면 좋겠습니다.

4 HTML은 다음과 같이 작성됩니다.
다음은 작업 레이어에 대한 작성과 그 안에 배치된 작은 그림입니다. 최근에는 CSS가 많이 추출되지 않습니다.
< div id="oriImage" 스타일=" 커서:십자형; 배경색: 노란색; 오버플로: 숨김; 너비: 150px; 높이: 150px;">

다음은 효과 레이어이고 큰 그림을 작성하는 방법은 CSS를 추출하지 않고 정말 게으르다

PS: "oriImg"인 작업 레이어의 이미지 외에도 각 HTML 요소의 ID가 필요합니다.
돋보기 레이어 스타일에 "overflow:hidden;"을 추가해야 하는데 너무 게으르네요.
이제 얘기를 마쳤습니다. 좋은 점은 제가 프론트엔드에만 참여하다 보니 부족한 부분이 많다는 점을 덧붙이고 싶습니다.
서투른 내용이지만 적어도 제가 직접 입력했습니다. 나중에 필요할지도 모르는 학생들은 저에게 직접 물어볼 수 있습니다.