최근 프로젝트에서 회원이 게시한 기사가 있었습니다. 기사의 일러스트가 휴대폰에 표시될 때 가끔 확대하여 볼 수 없으며 클릭하면 확대되지 않습니다.
여기서 조작할 수 있는 것은 img 태그뿐입니다.
$("img").click(function(){
})
img에 href 태그를 추가하고 img의 경로를 적으면 사진이 뜨는데 돌아갈 방법이 없으니 해결해주세요
표시된 그림과 유사하게 이 프런트 엔드 또는 플러그인을 구현하는 방법!
이미지를 클릭하면 새 마스크 레이어가 생성됩니다. 마스크 레이어에 있는 이미지의 src는 클릭한 대상의 src와 같습니다.
이미지 효과를 위한 jquery 플러그인을 살펴볼 수 있습니다. 프로젝트에 직접 도입한 다음 몇 가지 구성을 수행하면 구현됩니다. 이 효과 좋아요: http://www.jq22.com/yanshi6536
직접 이루고 싶다면
사진을 클릭하면 사진이 태그 레이어로 감싸진다는 뜻인 것 같아요
생각을 바꿀 수 있습니다
클릭 후 점프하려면 location.href를 사용하세요. 그러면 js에서 점프할지 돌아올지 판단하기가 더 쉬워집니다.
배경과 이미지 사이의 계층적 관계가 확립되었습니다. event.target을 사용하여 클릭한 이미지가 사진인지 검은색 배경인지 확인하세요.
이런 종류의 플러그인을 말씀하시는 건가요? http://refined-x.com/Flow-UI/...
모바일 버전에 대해서는 글을 쓰지 않았지만, PC 버전에서도 비슷한 효과에 대해서는 글을 쓴 적이 있습니다. 방법은 일반적으로 숨겨져 있는 마스크 레이어를 추가하는 것입니다. 이미지를 클릭하면 마스크 레이어 토글()을 수행한 다음 이미지의 src 속성을 마스크 레이어의 img에 할당합니다. 물론 최대 너비, 최대 높이, 중심 등 마스크 레이어 img의 스타일을 설정해야 합니다. 마지막으로 마스크 레이어의 레벨이 가장 높아야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이미지를 클릭하면 새 마스크 레이어가 생성됩니다. 마스크 레이어에 있는 이미지의 src는 클릭한 대상의 src와 같습니다.
이미지 효과를 위한 jquery 플러그인을 살펴볼 수 있습니다. 프로젝트에 직접 도입한 다음 몇 가지 구성을 수행하면 구현됩니다.
이 효과 좋아요: http://www.jq22.com/yanshi6536
직접 이루고 싶다면
사진을 클릭하면 사진이 태그 레이어로 감싸진다는 뜻인 것 같아요
생각을 바꿀 수 있습니다
클릭 후 점프하려면 location.href를 사용하세요. 그러면 js에서 점프할지 돌아올지 판단하기가 더 쉬워집니다.
팝업 후 큰 그림은 검은색 배경으로 되어 있어 사용자가 가장 쉽게 이해할 수 있습니다. 실제로 사용자는 검은색 배경을 클릭하여 돌아갈 수 있습니다.배경과 이미지 사이의 계층적 관계가 확립되었습니다. event.target을 사용하여 클릭한 이미지가 사진인지 검은색 배경인지 확인하세요.
점프할지 돌아올지 결정하세요이런 종류의 플러그인을 말씀하시는 건가요? http://refined-x.com/Flow-UI/...
모바일 버전에 대해서는 글을 쓰지 않았지만, PC 버전에서도 비슷한 효과에 대해서는 글을 쓴 적이 있습니다.
방법은 일반적으로 숨겨져 있는 마스크 레이어를 추가하는 것입니다. 이미지를 클릭하면 마스크 레이어 토글()을 수행한 다음 이미지의 src 속성을 마스크 레이어의 img에 할당합니다.
물론 최대 너비, 최대 높이, 중심 등 마스크 레이어 img의 스타일을 설정해야 합니다.
마지막으로 마스크 레이어의 레벨이 가장 높아야 합니다.