>  기사  >  웹 프론트엔드  >  jQuery를 사용하여 이미지 마스킹, 반투명 Falling occlusion_jquery 구현

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

WBOY
WBOY원래의
2016-05-16 16:08:551233검색

기본 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);
})
})

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.