jquery 그림 실루엣 페이드 그라데이션 효과

jquery 그림 실루엣 페이드 그라데이션 효과_jquery

WBOY

풀어 주다： 2016-05-16 18:35:21

원래의

1285명이 탐색했습니다.

내 밴드의 몇몇 친구가 약간의 라인업 변경을 겪었습니다. 홈 페이지의 사진을 변경해야 합니다. 나는 약간의 상호작용을 갖는 것이 흥미로울 것이라고 생각했습니다.

이 효과를 얻는 방법은 여러 가지가 있을 수 있는데, 이 방법이 제 머리 속에 갑자기 떠올라서 그대로 사용하게 되었습니다. 개요를 배경 이미지로 설정한 다음 그룹 내에서 각 밴드 멤버의 이미지 4개가 모두 정확히 같은 크기라는 아이디어입니다. 이러한 이미지는 기본적으로 숨겨져 있습니다. 그런 다음 영역 위에 4개의 절대 위치 영역이 있는데, 이는 전환 영역입니다. jQuery에서는 호버 이벤트에 이를 사용하여 해당 이미지를 점진적으로 표시합니다.

HTML
말씀드린 것처럼 4개의 이미지와 그 안에 전환 영역이 있는 div입니다. 모두 고유 ID와 공통 클래스 이름을 갖습니다.

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

< ;/a>

< /div>

CSS
는 클래스 이름(예: 위치 스타일)과 ID(특정 왼쪽 위치 특수 항목 포함)로 구성됩니다. .

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

 
#home-photos-box { float: 왼쪽; 너비: 352px; 배경: url(../images/guys-allblack.png) no-repeat; 334px 0 0; 위치: 상대; } 
#aller } 
#neil { 왼쪽: 25%; } 
#aaron { 왼쪽: 50% } 
#scott { 왼쪽: 75% } 
.home-roll-box { 위치: 절대; 색인: 1000 ; 블록; 높이: 25%; } 
.single-guy { 위치: 절대; 왼쪽: 0; } 

jQuery
해당 영역에 마우스를 올리면 이미지의 ID에 해당하며 페이드됩니다. 이때 stop()을 사용하여 페이드합니다. 여기서는 애니메이션이 대기열에 들어가는 것을 방지합니다. 불투명도 설정을 사용합니다. fadeToggle()은 마우스를 너무 빨리 움직이면 페이드됩니다.

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

 
$(function() { 
 var name = ""; 
$(".home-roll-box").hover(function() { 
name = $(this).attr("id"); 
$(" #image- " name).stop().show().animate({ 불투명도: 1 }); 
}, function() { 
name = $(this).attr("id"); 
 $("#image-" name).stop().animate({ opacity: 0 }) 
}) 

 

다운로드
http://www.jb51.net/jiaoben/24272.html