Cloudgamer에서 제작한 ImageZoom 사진 확대 효과_이미지 특수 효과-JS 튜토리얼-php.cn

일반적으로 제품 사진을 확대하는 데 사용됩니다. Fanke, JD.com, Alibaba 등에서도 유사한 효과를 사용할 수 있습니다.
장점은 확대해서 원본 이미지에 가까운 부분을 볼 수 있고, 마우스로 보는 영역을 조절할 수 있다는 점입니다.
얼마 전 소하이더스카이 사진 확대 효과를 보고 갑자기 직접 써보고 싶은 충동이 생겼습니다.
이 앱에는 다음과 같은 기능이 있습니다.
1. 원본 이미지를 확대하거나 새 이미지로 큰 이미지를 설정하는 것을 지원합니다.
2. 큰 이미지를 로드하기 전에 대신 원본 이미지를 사용하여 확대하세요. 작업 대기 시간 단축
3. 큰 이미지를 확대/축소할 수 있도록 지원합니다.
4. 표시 범위 또는 표시 상자 크기를 설정할 수 있습니다. 표시 상자를 자동으로 숨길지 여부를 설정합니다.
6. 플러그인 형식을 확장하여 더 많은 기능을 구현합니다(자세한 내용은 다음 기사 참조).
호환 대상: ie6/7/8, firefox 3.6.2, Opera 10.51, safari 4.0.4, chrome 4.1

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

var styles; 
if ( !viewer.clientWidth ) { 
var style = Viewer.styles = { 
디스플레이: 스타일 .display, 
위치: 스타일.위치, 
가시성: 스타일.가시성 
} 
$$D.setStyle( 뷰어, { 
디스플레이: "블록", 위치: "절대", 가시성: "숨김" 
}) 
} 
this._viewerWidth = Viewer.clientWidth; 
this._viewerHeight = Viewer.clientHeight; { $$D .setStyle( 뷰어, 스타일 ) } 
rangeWidth = Math.ceil( this._viewerWidth / scale ) 
rangeHeight = Math.ceil( this._viewerHeight / scale ); > 
 표시 범위는 clientWidth/clientHeight를 통해 얻어집니다. 
디스플레이 상자가 디스플레이가 없음으로 설정된 숨겨진 상태인 경우 clientWidth/clientHeight를 직접 얻을 수 없습니다. 
이 경우 프로그램은 다음 방법을 사용하여 획득합니다. 
1, 표시/위치/가시성의 원래 값을 기록합니다. 

2, "블록"/"절대"/"숨김으로 설정합니다. "는 각각 숨겨지거나 점유될 수 있습니다.
3, 매개변수를 가져옵니다.
4, 원래 값으로 재설정하고 원래 상태를 복원합니다.
표시 범위를 얻은 후 비율을 일치시켜 범위 매개변수를 얻을 수 있습니다.
ps: 이는 자리표시자가 아닌 요소의 크기 매개변수를 얻는 일반적인 방법입니다. jquery의 CSS도 이 방법을 사용하여 너비/높이를 얻습니다.
소수점은 비율 계산 후에 얻을 수 있지만 크기는 정수만 가능합니다. 프로그램은 항상 Math.ceil을 사용하여 반올림합니다.
【확대 효과】
모든 설정이 완료되면 시작을 실행하여 트리거 프로그램을 설정할 수 있습니다.
프로그램은 주로 _start 프로그램을 원본 이미지 개체의 마우스 오버/마우스 이동에 바인딩하는 시작 메서드를 자동으로 실행합니다.
var image = this._image, START = this._START
$$E; . addEvent( image, "mouseover", START )
$$E.addEvent( image, "mousemove", START )
원본 이미지 개체로 이동하는 경우에 해당합니다. 각각 개체.
ps: attachmentEvent를 사용하는 경우 동일한 함수를 반복적으로 바인딩하는 문제에도 주의해야 합니다. 여기의 addEvent에는 이러한 문제가 없습니다.
바운드 _start 프로그램은 주로 일부 이벤트를 바인딩 해제하고 바인딩하는 데 사용됩니다.

코드 복사

코드는 다음과 같습니다. $$E.removeEvent( image, "mouseover", this._START ) $$E.removeEvent( image, "mousemove", this._START ); E.addEvent( document, "mousemove", this._MOVE ) $$E.addEvent( document, "mouseout", this._OUT )

 
 window 확대 효과를 종료하려면 _OUT 프로그램을 문서의 mouseout에 바인딩합니다. 

코드 복사

코드는 다음과 같습니다. : this._OUT = $$F.bindAsEventListener( function(e){ if ( !e.관련Target ) this._END(); }, this ); 🎜>

마우스가 문서 밖으로 나가면 mouseout이 발생합니다. 현재 관련Target이 null이면 _end 실행이 지연되어 프로그램이 종료됩니다.

var oThis = this, END = function(){ oThis._end() }; 
this._END = function(){ oThis._timer = setTimeout( END, oThis.delay ) }; 먼저 실행되고 가능한 모든 바인딩된 이벤트가 제거된 다음 start 메소드를 실행하여 트리거를 계속 기다립니다. 
mousemove에 바인딩된 _move 모바일 프로그램은 주로 마우스가 움직이는 곳마다 확대 기능을 구현하는 데 사용됩니다. 
더 많은 상황(예: 확장의 다른 모드)에 적응하기 위해 문서에 바인딩되어 있지만 마우스아웃 이벤트를 사용하여 제거 프로세스를 트리거할 수는 없습니다. 
프로그램은 마우스의 좌표와 원본 이미지를 비교하여 마우스가 원본 이미지 개체 범위를 벗어났는지 여부를 확인합니다. 

코드 복사

코드는 다음과 같습니다.

 
var x = e.pageX, y = e.pageY, ret = this._ect 
if ( x < ret.left || x > ret.right || y < ret .top || y > ret.bottom ) { 
this._END(); 
} else { 
... 
} 

원본에서 벗어나 그림 객체인 경우 _END를 실행하면 확대 효과가 종료됩니다.
원본 이미지 객체 위에서 마우스를 움직이면 _repair 프로그램을 통해 좌표가 계산되어 위치 지정에 필요한 값으로 변환됩니다.
마지막으로 확대할 부분이 표시 상자에 표시되도록 큰 이미지의 왼쪽/상단 위치를 설정합니다.
ps: 위치 지정을 위해 scrollLeft/scrollTop을 사용해 보았지만 IE에서는 톱니처럼 움직일 것이라는 점을 발견하고 크기가 커질수록 더 뚜렷해져서 포기했습니다.
[마우스 스크롤 및 확대/축소]
마우스 속성을 true로 설정하면 마우스 스크롤 및 확대/축소 기능이 활성화됩니다.
확대 효과 중에는 마우스 휠을 굴리면 큰 이미지를 확대, 축소할 수 있습니다.
사실 스크롤 휠 매개변수의 변화에 따라 확대 비율을 수정하는 것입니다.
마우스 스크롤 이벤트에 대해서는 슬라이더에서도 언급됐는데 당시에는 ie와 ff의 차이점만 분석했습니다. 여기서 다시 분석해 보겠습니다.
먼저 IE는 이벤트를 바인딩하기 위해 마우스휠을 사용하고, 스크롤 매개변수를 얻기 위해 이벤트의 휠델타를 사용합니다. < !DOCTYPE html>

< script>