에 의해이완 막

2024년 4월 14일

마우스오버 시 이미지 확대

사용자 정의 코드를 사용하여 마우스를 올리면 이미지에 대한 데스크탑 및 모바일 친화적 돋보기를 추가합니다.

웹사이트에는 제품 사진이나 삽화와 같이 복잡한 세부정보가 풍부한 이미지가 있을 수 있습니다. 일부 사용자 정의 코드를 사용하면 방문자가 근육을 움직이지 않고도 이러한 이미지의 특정 부분 위로 마우스를 가져가서 증폭할 수 있습니다.

분홍색, 빨간색, 녹색 상자와 시계의 이미지는 Webflow 디자이너의 페이지 사용자 정의 코드 설정에 배치된 사용자 정의 코드를 사용하여 마우스를 올리면 확대됩니다.

이 튜토리얼은 다음 단계에 따라 페이지나 프로젝트에 사용자 정의 코드를 삽입하여 이미지를 확대하는 과정을 안내합니다.

맞춤 코드 삽입
수업 이름 지정
돋보기 맞춤설정


<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){

  if(!$.fn.imagezoomsl){

      $('.msg').show();
      return;
    }
    else $('.msg').hide();

    // plugin initialization
    $('.image').imagezoomsl({

      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

맞춤 코드 삽입

프로젝트에 사용자 정의 코드를 삽입하는 방법에는 두 가지가 있습니다.

전체 프로젝트에 코드 포함
개별 페이지에 코드 통합

전체 프로젝트에 코드를 삽입하려면:

프로젝트에 액세스하세요. 설정
선택 맞춤 코드 탭
코드를 바닥글 코드 섹션(예: “이전 </body> 꼬리표")
딸깍 하는 소리 변경 사항을 저장하다

메모: 단축키를 사용하여 프로젝트에 코드를 삽입할 수 있습니다. 명령 + V (Mac의 경우) 또는 컨트롤 + V (윈도우즈에서).

프로젝트 전체에서 사용자 정의 코드를 배치할 수 있는 위치를 표시하기 위해 프로젝트 설정에서 사용자 정의 코드 탭을 선택합니다.

이미지 확대 사용자 정의 코드는 프로젝트 설정의 바닥글 코드 섹션에 배치되어야 하며, </body> 꼬리표.

개별 페이지에 코드를 삽입하려면 다음 단계를 따르세요.

실행 디자이너
액세스 페이지 패널 원하는 페이지의 페이지 설정 톱니바퀴 아이콘을 선택하세요.
스크롤하여 맞춤 코드 페이지 설정 내 섹션
코드를 전에 </body> 꼬리표 부분
딸깍 하는 소리 구하다

메모: 단축키를 사용하여 프로젝트에 코드를 붙여넣을 수 있습니다. 명령 + V (Mac의 경우) 또는 컨트롤 + V (윈도우즈에서).

페이지 설정에 액세스하려면 페이지 패널을 열고 페이지 위로 마우스를 가져가면 클릭할 톱니바퀴 아이콘이 표시됩니다.

페이지의 사용자 정의 코드 설정, 특히 이전 </body> 태그 섹션.

사용자 정의 코드를 프로젝트에 성공적으로 통합했습니다!

수업 이름 지정

확대 효과를 적용하려는 이미지에 고유한 클래스 이름을 할당해 보겠습니다.

선택 영상 당신은 확대하고 싶습니다
액세스 스타일 패널 그리고 선택기 필드
그것을 줘 수업 (예: “확대”)

이미지의 선택기 필드에는 "확대"라는 새로운 클래스가 추가된 것으로 표시됩니다.

코드에 "Magnify" 클래스를 포함시켜 보겠습니다.

액세스 페이지 패널 맞춤 돋보기 코드가 있는 페이지의 페이지 설정 톱니바퀴 아이콘을 선택하세요.
스크롤하여 전에 </body> 꼬리표 페이지 설정의 섹션
바꾸다 ".영상”를 수업 이름(예: “.확대하다")
딸깍 하는 소리 구하다

페이지 설정의 사용자 정의 코드에 이미지 확대를 위한 코드를 삽입한 후 새로 정의된 “Magnify” 클래스에 해당하도록 코드를 수정해야 합니다.

돋보기 크기를 조정하려면 페이지 설정 내 맞춤 코드의 돋보기 크기 섹션에서 픽셀 값을 수정해야 합니다.

에 의해이완 막

업데이트 날짜 2024년 4월 14일

레이아웃 디자인