jQuery Tutorial For Beginners: How To Create jQuery Image Zoom Effect

안녕? 여기 상원 의원 coodingpassiveincomecom

오늘의 비디오에서 나는 이미지 확대 / 축소 효과를 만드는 방법에 대해 이야기하십시오 jQuery 그래서 아이디어는 우리 웹 사이트에 있습니다 우리는 많은 작은 이미지를로드합니다 왜냐하면 그런 식으로 우리의 웹 사이트는 더 빠릅니다

이제 우리는 마우스를 사용하여 그 작은 이미지 위에 포인터 그 이미지 확대되어 이제 우리는 거대한 그림과 모든 세부 사항을 보아라 그 큰 이미지에 이제 우리가 움직일 때 작은 이미지 위에 마우스를 올려 놓으면 에 대한 모든 세부 사항을 볼 수 있어야합니다 큰 이미지 그런 식으로 우리는 성취했다

그 우리의 웹 사이트로드 빠른뿐만 아니라, 그 방문객은 모든 이미지에 대한 세부 정보 내가 너에게 보여 줄게 그렇게하는 방법 이제 저는 여기에있는 PC에 있습니다 이미지 확대 / 축소 효과를 만드는 방법을 보여줍니다

우리가해야 할 첫 번째 일 우리는 하나의 jQuery를 다운로드 할 예정인가? 플러그인을 사용하는 방법을 알려 드리겠습니다 나는 먼저 google에 가고 싶다 그 후에 나는 elevatezoom을 타자를 치고 싶다, 여기서 우리는 첫 번째 결과, 열리고 여기에 웹 사이트와 그것이 얼마나 멋지게 보는지에 관해 안다 여기 다른 권리 상단에 다운로드 옵션이 있으므로 클릭하십시오 거기에 여기 빨간색이 있습니다

버튼을 클릭하여 다운로드를 클릭하십시오 지금 플러그인을 설치하고 PC에 다운로드하십시오 일단 당신이 다운로드, 그냥 마우스 오른쪽 버튼으로 클릭 여기에서 추출하십시오 좋아, 이걸로 우리는이 파일을 모두 가지고있다

플러그인 그래서 코드를 작성하지 않을 것입니다 처음부터 모든 것, 나는이 플러그인이었고 또한 데모를 사용할 것이다 HTML 이 플러그인에 의해 제공됩니다 사용 방법을 알려 드리겠습니다

그래서 나는 이 파일을 숭고한 텍스트로 열어 보겠다 여기에서 볼 수 있듯이 이제 나는 기본 기능을 보여줍니다 이것이 내부에 들어갈 코드 기본적으로 설명 하겠지만 그것있다 여기 머리 꼭대기가있다 메타가있는 웹 사이트의 일부 제목 및 여기에 스크립트가 포함되어 있습니다

옵션 나는 그저 바꿀 것이다 그 위치를 잡고 이 웹 사이트의 바닥 글, 여기에있는 것이 현명하지 않기 때문에 귀하의 웹 사이트가 훨씬 느린 그리고 여기에 h1 태그가 있습니다 특별한 것은 없으며 여기서 중요한 것은 부분, 이미지 부분을 선언했습니다

ID가 zoom_01이고 여기에 운동 특성, 당신은 작은 이미지 및 여기에 큰 정의 영상 이제이 예제를 실행 해 보겠습니다 그냥 두 번 클릭하면 이제 어떻게 볼 수 있을까요? 그것은 보인다 마우스를 움직일 때 우리는 할 수있다 큰 이미지를보십시오

좋아, 당신은 모든 세부 사항을 볼 수있다 이 사진 좋아, 그래서 지금 나는 어떤 것을 보여주고 싶다 다른 기능과 선물 플러그인 있습니다 그래서, 여기에 이미 정의되어 있습니다

id zoom_01에서 elevateZoom 그래서 내가 보여주고 싶은 첫 번째 것은 편해지고 있습니다 그래서 우리는 진정한 완화를 말하면됩니다 그래서 시도하지 마시고 마우스를 제거하십시오 큰 이미지가 멋지게 보입니다

쉽게 보여주기 때문에 너무 빠르지는 않습니다 이것 좀 봐, 아주 좋아 다음 내가 너에게 보여주고 싶은 건 이 확대 / 축소 효과가있는 위치 표시됩니다 예를 들면 먼저 확대 / 축소 유형을 변경합니다 내부 및 커서를 바꾸고 말하고 싶다

그것은 십자가가 될 것입니다 어쩌면 내가 틀렸어 그래서 지금 시도해 보시고, 이것을 새로 고침 해보세요 아주 좋습니다 그것은 작은 이미지 안에 있습니다

큰 이미지와 왼쪽 또는 오른쪽으로 이동할 수 있습니다 권리 좋아, 나는 이걸 할거야 내가 보여주고 싶은 건 우리가 할 수있는 방법입니다 창 위치를 바꾼다

큰 이미지를 보여줍니다 그래서, 우리는 zoomWindowPosition과 let 's 번호 하나를 말하고 새로 고침하십시오 지금이 그 위치입니다 우리가 바꿨다면 다섯 번째 예를 들어 보겠습니다 여기에 있습니다

오른쪽 상단 모서리에서 번호가 있습니다 하나, 그때 그것은 2, 3, 4, 5, 6 그리고 열 여섯 그래서, 지금 해보려고하면 9 개의 새로 고침을 해봅시다 여기 왼쪽에 이제 숫자를 시도해 보겠습니다

이러지 그냥 빨리 보여줘 새로 고침을하면 이제 어디에서 볼 수 있습니까? 9 번 그리고 이렇게 말하자 의 말을하자 우리는 숫자 13을 사용하여 이것을 보게 될 것입니다

이제이 이미지에 관한 것입니다 그래서 기본적으로 1에서 16까지, 당신은 변화하고 놀 수있다 번호와 당신은 확대 / 축소 이미지의 더 나은 위치 또는 당신은 내부 줌을 사용하는 장소가 없습니다 그래서, 다음은 내가 당신을 보여주고 싶다

렌즈 효과입니다 그래서, 말하다 ~ 같은 zoomType "lens"이제 우리는 다음을 할 필요가 있습니다 lensShape를 찾으십시오 우리가 라운드를 사용한다고 가정 해 봅시다

렌즈 크기를 정의합니다 100을 가정 해 보자 이것에, 아주 아주 강력하다 이제하자 이 확대 / 축소 크기를 200, 예를 들면, 지금 이것은 매우 서늘합니다

이것 봐, 아주 강력 해 좋아, 그래서 나는 당신이 움직이는 마우스 오버 우리는 멋지게 확대하고 축소하고자합니다 우리는 그 효과를 만들고 싶습니다 이제 zoomFadeIn을 말하자 우리는 1 초를 원하고 zoomFadeOut 우리가 원하는 1 초도

이것은에 표시됩니다 밀리 세컨드이므로 우리는 천 밀리 초는 1 초가됩니다 이것 좀 봐, 아주 좋아 그리고 지금 내가 마지막으로 원하는 것은 쇼는 일단 우리가 우리 위에 마우스를 움직인다 영역 이미지가 있지만 어떻게 할 수 있습니까? 우리가 더 많이 확대하고 싶다면 우리는 이것을 scrollZoom과 같이 사용할 필요가있다

진실하고 그리고 지금, 내가 마우스로 이제는 마우스에서 휠을 사용할 것입니다 이것 좀 봐, 나만큼 확대 할 수있어 필요 좋아, 이제 모든 세부 사항을 볼 수있다 이 이미지는 매우 시원하고 매우 멋지다

좋은 좋아, 그 남자, 그게 다야 사용하기가 매우 쉽습니다 아주 훌륭한 플러그인, 매우 빠릅니다 그러고 싶습니다

이걸 사용하도록 권유합니다 왜냐하면 저는 대부분의 경우 개인적으로 사용하십시오 사물과 나는 그것에 어떤 문제도 가지지 않았다 질문이 있으면 의견을주십시오 아래, 또한이 비디오가 마음에 드시면 그것을 좋아하고 공유하십시오

얘들 아 ~까지 다음 번에, 안녕, 안녕