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과 같이 사용할 필요가있다

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

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

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

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

Bootstrap Card Image Zoom in Zoom out Effect – Must Watch

안녕하세요 일일 수업료로 돌아 오신 것을 환영합니다

이 튜토리얼에서는 멋진 카드를 만드는 방법을 보여줍니다 이미지를 축소합니다 호버 효과 카드 이미지 위에서 마우스 커서를 움직이면이 이미지가 확대되어 보입니다 커서를 움직이면 축소 효과가 나타납니다

이 비디오를 시작하기 전에 구독 버튼을 누르고 있는지 확인하십시오 벨 아이콘은 내 모든 새로운 비디오를 알리고 버튼을 누르는 것을 잊지 마세요 이 비디오에서 유용한 것을 찾을 수 있습니다 그래서 우리가 늦기 전에 시작하자 비주얼 코드 편집기를 열고 새 프로젝트를 만듭니다

해당 프로젝트에서 주식 폴더를 삽입하고 해당 폴더에 세 개의 이미지를 삽입하십시오 이제 인덱스 도트 HTML 파일을 작성하고 stylecss 파일을 작성하십시오 indexhtm 파일에서 간단한 HTML5 스 니펫을 만들고 title을 지정하십시오

그런 다음 제목 태그 링크 stylecss에서 라이브 서버에서이 파일을 엽니 다 이제는 부트 스트랩을 프로젝트에 추가하여 부트 스트랩 웹 사이트를 만들고 여기에서이 CDN을 복사하여 indexhtm의 머리 부분에 붙여 넣습니다 body 태그에서 컨테이너 클래스를 만들고이 클래스에서 내용을 합친 행을 삽입합니다

센터 클래스 컨텐트 정당화 Center 클래스는 모든 요소를 ​​가운데 정렬하는 데 사용됩니다 이 수업에서는 col MD 4 개의 세 열을 만듭니다 각 열에 부트 스트랩 카드를 삽입합니다 카드를 만들려면 부트 스트랩 웹 사이트로 이동하여 구성 요소를 클릭하고 카드를 선택하십시오

이 카드를 선택하고이 코드를 복사하여 첫 번째 열에 붙여 넣습니다 원본 속성에서 이미지의 일부를 지정합니다 여기서는 이미지의 저장 폴더와 이름을 지정하겠습니다 그런 다음 카드 폭을 늘리고 20rem을 지정합니다 카드 제목과 단추 텍스트를 변경하십시오

다음을 지정하십시오 카드 단락에서 일부 데모 테스트 그래서 일부 텍스트를 복사하여 여기에 붙여 넣을 것입니다 그런 다음 기본 버튼을 성공으로 변경하십시오 우리가 텍스트를 추가하는 텍스트의 가운데에 센터 클래스 그게 다야

이제 카드 준비가되어 있지만 배경에 그림자를 추가하고 싶습니다 그래서 우리는 카드에 Shadow 클래스를 추가합니다 이제 카드에 적용된 그림자가 보입니다 두 번째 및 세 번째 카드를 만들어 첫 번째 카드를 복사하여 붙여 넣습니다 두 번째 열과 세 번째 열에 있습니다

이제 이미지 태그의 소스 속성을 변경하고 카드 제목을 변경하려고했습니다 두 번째 및 세 번째 카드의 이미지 및 카드 제목 텍스트를 변경합니다 이제 카드 준비가 표시됩니다 stylecss 컨테이너 클래스를 선택하고 8 %에서 margin-top을 지정하십시오

그러면 모든 카드가 가운데에 배치됩니다 이제이 카드에 이미지 호버 효과를 만들고 싶었습니다 이 이미지 확대 / 축소 효과를 만들기 위해 우리는 부분에 img 태그를 래핑하고 클래스를 지정합니다 안의 이미지 태그를 잘라내어 내부 클래스에 붙여 넣으십시오

두 번째와 세 번째 카드에도 똑같이하십시오 그 후 stylecss 파일에서 내부 클래스 선택 overflow 속성을 숨김으로 지정합니다 이미지 태그를 선택하고 전환 속성을 모두 지정하여 지속 시간 15 초 및 애니메이션 용이성의 흐름을 지정하십시오

그 후 내부 클래스에 호버 효과를 만들고 이미지 태그를 선택하고 변환을 지정합니다 특성 척도 15 스케일 기능을 사용하여 크기를 늘립니다 이미지의 이제 이미지 위에서 마우스를 가져 가면 확대 / 축소 효과가 나타납니다

그래서 이미지 위에 커서를 올려 놓으면 줌이 적용되고 움직일 때 볼 수 있습니다 커서가 축소 효과를 볼 수 있습니다 오버 플로우 속성 내부 클래스를 제거하면 어떤 일이 일어 났는지 보여 드리겠습니다 그래서 당신이이 속성을 제거하면 당신은 이렇게 보일 것입니다 오버플로 속성을 사용하여 마우스 커서를 움직일 때 오버플로 콘텐츠를 숨 깁니다

이미지에 이미지는 여전히 크기가 커지지 만 나머지 내용은 숨겨집니다 그게 다야 우리의 이미지 확대 축소 기능이 생성됩니다 이 비디오에서 유용한 것을 발견하면 좋아하는 버튼을 눌러야합니다

가입 버튼을 클릭하면 모든 새로운 비디오를 알릴 수 있습니다 그것은 또한 지금입니다 우리는 다음 튜토리얼에서 당신을 볼 것입니다 그때까지 행복하게 지켜보고