웹 사이트에 돋보기 효과를 만드는 방법

동영상: 일단 해봐요- 생방송 오후 1시 - 돋보기를 쓰면 노안이 빨라진다? 제2의 눈, 안경 사용법_#001

콘텐츠

지침
어떻게
공지 사항

웹 사이트 방문객에게 이미지를 자세하게 볼 수있는 기회를 제공하려면 이러한 그림을 약간 조작해야합니다. 컴포지션에 약간의 CSS, JavaScript 및 jQuery를 추가하면 마우스 포인터가 페이지의 이미지 위로 이동함에 따라 돋보기 효과를 만들 수 있습니다. 이 효과는 마우스 포인터가 전경에 표시된 이미지 위로 움직일 때 배경 이미지를 표시하는 작은 창을 만들어서 얻을 수 있습니다.

지침

귀하의 웹 사이트 방문객에게 이미지의 "클로즈업"을 제공하십시오. (브랜드 X 그림 / 브랜드 X 그림 / 게티 이미지)

지침과 함께 HTML 코드의 "head"섹션에 JavaScript 및 jQuery를 포함하십시오.

이 예제에서 jQuery 라이브러리는 기본 HTML 디렉토리에 있습니다.
브라우저가 jQuery 연산자를 구문 분석하지 못하도록 CDATA 태그를 삽입하십시오.
이미지를 표시하는 데 사용되는 높이 및 너비 변수를 설정합니다.

var W = 743; var H = 1155; var w = 192; var h = 300;
배율 기능을 시작하는 조건을 설정하십시오. 이 함수를 호출하면 사용자가 페이지에 표시된 더 작은 이미지 위로 마우스를 이동하면 마우스 포인터가 가장 큰 덮힌 이미지의 원형 뷰어로 바뀝니다. 다음 코드로이 인스턴스를 만듭니다.

$ (document) .ready (function () {

mouseover (function (e) {$ (document) .mousemove (myMM); $ ( "# glass") fadeIn ( 'fast');

});
확대 기능 및 종료 매개 변수를 설정합니다. 이 예에서는 숨겨진 이미지가 작은 그림의 두 배 크기로 확대되고 마우스 포인터가 작은 그림의 경계 밖으로 이동할 때 확대 창이 사라집니다. 코드를 사용하여이 작업을 수행 할 수 있습니다.

function myMM (e) {var myImage = $ ( "# myimage"); var glassImage = $ ( "# glass-image"); var glass = $ ( "# glass"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). 위쪽; var bx = glassImage.width () / 2 - xs승 /; var by = glassImage.height () / 2 - ysH / h; glass.css ( "left", e.pageX-75-89 + "px") .css ( "top", e.pageY-75-10 + "px"); glassImage.css ( "배경 위치", bx + "px"+ by + "px"); if (bx <-W || by <-H || bx> 150 ||> 150) {myImage.unbind ( 'mousemove', myMM); glass.fadeOut ( 'fast'); }}
jQuery "스크립트"를 닫고 지침에 따라 CDATA 파서를 삭제하십시오.

// ]]>
큰 배경 이미지와 확대 윈도우 테두리를 코드와 함께 배치하려면 CSS로 페이지 레이아웃을 설정하십시오.
type = "text / css"> #monaimage {margin-left : 200px; } #glass {background-repeat : no-repeat; 배경 위치 : 왼쪽 상단; 너비 : 250px; 높이 : 170px; 패딩 - 상단 : 10px; 패딩 왼쪽 : 89px; margin : 0; 위치 : 절대; 표시 : 없음; } # glass-image {background-image : url ( 'myImageLarge.jpg'); 너비 : 150px; 높이 : 150px; border-radius : 75px; -moz-border-radius : 75px; background-repeat : no-repeat; 배경색 : #fff; margin : 0; 패딩 : 0; 커서 : 없음; }
"body"섹션에 페이지를 표시하는 HTML 코드를 작성하십시오.

>

이미지 위에서 마우스를 움직입니다.