Cloudgamer에서 제작한 ImageZoom 사진 확대 효과_이미지 특수 효과
- WBOY원래의
- 2016-05-16 18:30:471087검색
일반적으로 제품 사진을 확대하는 데 사용됩니다. 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, "블록"/"절대"/"숨김으로 설정합니다. "는 각각 숨겨지거나 점유될 수 있습니다. 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, 표시/위치/가시성의 원래 값을 기록합니다.
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 모바일 프로그램은 주로 마우스가 움직이는 곳마다 확대 기능을 구현하는 데 사용됩니다.
더 많은 상황(예: 확장의 다른 모드)에 적응하기 위해 문서에 바인딩되어 있지만 마우스아웃 이벤트를 사용하여 제거 프로세스를 트리거할 수는 없습니다.
프로그램은 마우스의 좌표와 원본 이미지를 비교하여 마우스가 원본 이미지 개체 범위를 벗어났는지 여부를 확인합니다.
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>
function test(e){ 경고(e.type ":" e.detail "_" e.wheelDelta) } document.addEventListener( "DOMMouseScroll", test, false ); >document .addEventListener( "mousewheel", test, false )
조금 아래로 스크롤하면 다음 결과를 얻을 수 있습니다.
ff: DOMMouseScroll:3_undefine
opera: mousewheel:3_-120
chrome/safari: mousewheel:0_-120
볼 수 있습니다. 이벤트 바인딩의 경우 ff는 DOMMouseScroll만 지원하고 다른 이벤트는 마우스휠만 지원합니다.
스크롤링 매개변수 획득의 경우 ff는 디테일만 지원하고, Opera는 둘 다 지원하며, chrome/safari는 WheelDelta를 지원합니다.
ps: 크롬/사파리 디테일이 왜 0인지 이해가 안가네요. 다른 용도가 있나요?
DOMMouseScroll과 마우스휠의 또 다른 차이점은 전자는 요소를 직접 바인딩할 수 없지만 후자는 요소를 직접 바인딩할 수 있다는 것입니다.
즉, elem.onmousewheel은 가능하지만 elem.onDOMMouseScroll은 불가능합니다.
위 분석에 따르면 _start 프로그램에서 _mouse 프로그램은 다음과 같이 문서의 스크롤 이벤트에 바인딩됩니다.
this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE );
_mouse 프로그램에서 롤링 매개변수와 사용자 정의된 비율 배율을 기반으로 새로운 확대 비율을 얻습니다.
this._scale = ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate;
비율이 수정되면 프로그램 매개변수도 다시 계산해야 합니다.
_rangeWidth/_rangeHeight는 계산 프로세스에 영향을 미치므로 이를 사용자 정의 기본값으로 복원해야 합니다.
var opt = this.options;
this._rangeWidth = opt.rangeWidth; _rangeHeight = opt.rangeHeight;
그런 다음 _initSize 및 _initData를 실행하여 크기와 매개변수를 재설정한 다음 _move를 실행하여 위치를 변경합니다.
마지막으로 페이지 스크롤이 실행되지 않도록 방지Default를 사용하는 것을 잊지 마세요.
사용팁
[사진 설정]
본 프로그램은 대형 이미지, 원본 이미지 확대, 새로운 대형 이미지 사용 등을 지원합니다.
새 큰 이미지를 사용하고 이미지가 상대적으로 큰 경우 확대 비율을 설정하여 프로그램이 큰 이미지를 로드하기 전에 자동으로 원본 이미지를 사용하여 확대하도록 하는 것이 좋습니다. 큰 이미지가 로드될 때까지 기다리세요.
또한 새 큰 이미지의 너비와 높이 비율은 원본 이미지와 일치해야 합니다. 그렇지 않으면 원본 이미지를 사용하여 확대하면 좌표가 잘못 정렬됩니다.
[표시 프레임 설정]
표시 프레임의 크기를 설정하는 방법에는 두 가지가 있습니다.
표시 범위를 고정하려면 rangeWidth/rangeHeight를 먼저 설정하면 프로그램이 표시 프레임의 크기를 계산합니다.
표시 상자의 현재 크기를 사용하여 표시하려면 rangeWidth/rangeHeight를 설정하지 않거나 0으로 설정하세요.
【reset】
다양한 속성과 객체 사이의 많은 관계로 인해 많은 속성을 직접 수정할 수 없습니다.
프로그램은 이러한 속성을 수정하기 위해 특별히 재설정 방법을 설정합니다.
프로그램 로드 후 원본 이미지 크기, 표시 상자 크기 등 프로그램 계산에 영향을 미치는 스타일이 수정된 경우 매개변수 및 속성을 재설정하려면 재설정도 수행해야 합니다. .
【플로팅 위치 설정】
프로그램에는 디스플레이 프레임의 플로팅 위치 설정 기능이 없습니다. 필요한 경우 직접 추가할 수 있습니다.
간단한 위치 지정의 경우 인스턴스 메서드를 참고할 수 있으며 선택 재정의에 주의하세요.
더 복잡한 플로팅 포지셔닝을 원하시면 "플로팅 포지셔닝 프롬프트 효과"를 참고하세요.
【오페라 버그】
테스트 중 오페라 10.10에서 2개의 버그가 발견되었습니다.
각각 img 요소를 투명하게 설정하면 배경 이미지가 표시되며 js를 사용하여 마우스 스타일을 수정하는 데 문제가 발생합니다.
그러나 이 두 가지 문제는 10.50에서 수정되었습니다. 아직 업그레이드하지 않으셨다면, 빨리 업그레이드하시기 바랍니다.
【maxthon 버그】
maxthon 2.5.1로 테스트할 때 문제가 발견되었습니다. 다음 코드를 테스트하세요.
조금 아래로 스크롤하면 다음 결과를 얻을 수 있습니다.
ff: DOMMouseScroll:3_undefine
opera: mousewheel:3_-120
chrome/safari: mousewheel:0_-120
볼 수 있습니다. 이벤트 바인딩의 경우 ff는 DOMMouseScroll만 지원하고 다른 이벤트는 마우스휠만 지원합니다.
스크롤링 매개변수 획득의 경우 ff는 디테일만 지원하고, Opera는 둘 다 지원하며, chrome/safari는 WheelDelta를 지원합니다.
ps: 크롬/사파리 디테일이 왜 0인지 이해가 안가네요. 다른 용도가 있나요?
DOMMouseScroll과 마우스휠의 또 다른 차이점은 전자는 요소를 직접 바인딩할 수 없지만 후자는 요소를 직접 바인딩할 수 있다는 것입니다.
즉, elem.onmousewheel은 가능하지만 elem.onDOMMouseScroll은 불가능합니다.
위 분석에 따르면 _start 프로그램에서 _mouse 프로그램은 다음과 같이 문서의 스크롤 이벤트에 바인딩됩니다.
this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE );
_mouse 프로그램에서 롤링 매개변수와 사용자 정의된 비율 배율을 기반으로 새로운 확대 비율을 얻습니다.
this._scale = ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate;
비율이 수정되면 프로그램 매개변수도 다시 계산해야 합니다.
_rangeWidth/_rangeHeight는 계산 프로세스에 영향을 미치므로 이를 사용자 정의 기본값으로 복원해야 합니다.
var opt = this.options;
this._rangeWidth = opt.rangeWidth; _rangeHeight = opt.rangeHeight;
그런 다음 _initSize 및 _initData를 실행하여 크기와 매개변수를 재설정한 다음 _move를 실행하여 위치를 변경합니다.
마지막으로 페이지 스크롤이 실행되지 않도록 방지Default를 사용하는 것을 잊지 마세요.
사용팁
[사진 설정]
본 프로그램은 대형 이미지, 원본 이미지 확대, 새로운 대형 이미지 사용 등을 지원합니다.
새 큰 이미지를 사용하고 이미지가 상대적으로 큰 경우 확대 비율을 설정하여 프로그램이 큰 이미지를 로드하기 전에 자동으로 원본 이미지를 사용하여 확대하도록 하는 것이 좋습니다. 큰 이미지가 로드될 때까지 기다리세요.
또한 새 큰 이미지의 너비와 높이 비율은 원본 이미지와 일치해야 합니다. 그렇지 않으면 원본 이미지를 사용하여 확대하면 좌표가 잘못 정렬됩니다.
[표시 프레임 설정]
표시 프레임의 크기를 설정하는 방법에는 두 가지가 있습니다.
표시 범위를 고정하려면 rangeWidth/rangeHeight를 먼저 설정하면 프로그램이 표시 프레임의 크기를 계산합니다.
표시 상자의 현재 크기를 사용하여 표시하려면 rangeWidth/rangeHeight를 설정하지 않거나 0으로 설정하세요.
【reset】
다양한 속성과 객체 사이의 많은 관계로 인해 많은 속성을 직접 수정할 수 없습니다.
프로그램은 이러한 속성을 수정하기 위해 특별히 재설정 방법을 설정합니다.
프로그램 로드 후 원본 이미지 크기, 표시 상자 크기 등 프로그램 계산에 영향을 미치는 스타일이 수정된 경우 매개변수 및 속성을 재설정하려면 재설정도 수행해야 합니다. .
【플로팅 위치 설정】
프로그램에는 디스플레이 프레임의 플로팅 위치 설정 기능이 없습니다. 필요한 경우 직접 추가할 수 있습니다.
간단한 위치 지정의 경우 인스턴스 메서드를 참고할 수 있으며 선택 재정의에 주의하세요.
더 복잡한 플로팅 포지셔닝을 원하시면 "플로팅 포지셔닝 프롬프트 효과"를 참고하세요.
【오페라 버그】
테스트 중 오페라 10.10에서 2개의 버그가 발견되었습니다.
각각 img 요소를 투명하게 설정하면 배경 이미지가 표시되며 js를 사용하여 마우스 스타일을 수정하는 데 문제가 발생합니다.
그러나 이 두 가지 문제는 10.50에서 수정되었습니다. 아직 업그레이드하지 않으셨다면, 빨리 업그레이드하시기 바랍니다.
【maxthon 버그】
maxthon 2.5.1로 테스트할 때 문제가 발견되었습니다. 다음 코드를 테스트하세요.
코드 복사 코드는 다음과 같습니다.