jQuery를 사용하여 이미지 마스킹, 반투명 Falling occlusion_jquery 구현

기본 9각형 그리드 이미지 정렬 효과입니다. 마우스를 이미지 위로 가져가면 반투명 마스크 효과가 이미지 상단에서 아래로 미끄러집니다.

일부 텍스트 소개가 동시에 나타납니다

사용방법:

1. 웹 페이지에 헤드의 CSS 스타일을 도입하세요
2. 웹페이지 본문 끝에 코드 부분을 복사하세요
(js와 이미지는 절대 경로를 사용하므로 수정은 권장하지 않습니다)

코드 복사 코드는 다음과 같습니다.

$(함수(){
$('.sgw_img dt').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},함수(){
            $(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.sgw_img dd').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},함수(){
            $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})

위 내용은 이 글에 공유된 내용입니다. 모두 마음에 드셨으면 좋겠습니다.