jquery_jquery를 기반으로 한 방향 그림 그라데이션 애니메이션 효과-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 한 방향 그림 그라데이션 애니메이션 효과

WBOY

풀어 주다： 2016-05-16 18:26:30

원래의

1031명이 탐색했습니다.

또 다른 점은 필터의 사용인데, 한 가지 설명해야 할 점은 필터를 인식할 수 없고 Firefox에서는 그 효과가 보이지 않는다는 것입니다.
코드 작성을 시작하겠습니다
html은 비교적 간단합니다. 🎜>
코드

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

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

myjquerydirection < META http-equiv=content-type content="text/html; charset=gb2312">

섬

;/li>
;div> 푸른 잎이 있는 나무

큰 나무

들판의 해바라기

🎜>

여기에는 id=frontTextBack을 사용하여 그림자가 구현되는 것을 보여줍니다. CSS 필터. 다른 코드에 대해서는 말할 것도 없습니다
이제 CSS 코드 작성을 시작하겠습니다
먼저 최상위 수준에서 코드 작성을 시작합니다

코드 복사

코드는 다음과 같습니다. body { padding:0 moz-user-select: none margin; :0;

}

#nav { 배경: url("loadsmall.gif") 반복 없음 스크롤 330px 100px #000; 
height:240px 
overflow:hidden; :relative; 
너비:760px; 
#nav ul { 하단:0px 
위치:절대; -align:left; 
} 
#nav ul li { list-style:none; 
float:left; :50px; 
폭:140px; 
위치:상대적; 
} 
#nav li img{ border:1px 단색 흰색; ; 
float:왼쪽; 
왼쪽:10px; 
너비:52px; 🎜>#nav li div{ FILTER: alpha(opacity=60); 
margin-left:70px; 
margin-top:5px; 
padding-left:10px>color: 흰색; 
} 
#frontTextBack{color:#000; 
font-family:Verdana; 
font-size:30px 
위치:절대; 너비:100%; 
상단:22px; 
#frontText { 색상:#fff; 
글꼴-크기:30px; 20px; 
위치:20px; 
폭:100%; 
} 
#frontTextSub 
글꼴 크기:13px; 
왼쪽:25px; 
상단:60px; 
폭:100%; 
#BG { 배경: 없음 스크롤 0 0 #000; 테두리 상단:1px 솔리드 #999; 하단:0; 
위치:절대값 
 >너비:100%; z-index:990; 
} 
#back { text-align:center; 
} 
.gray {FILTER:gray() } //필터를 회색으로 설정


다음 단계는 js 
코드
Load first




코드 복사


 코드를 작성하는 것입니다. 다음과 같습니다:
 
$(function(){ 
//먼저 클릭해야 할 img를 찾습니다 
$("li img").click(function(){ 
//클릭할지 여부 확인 현재 img가 이미 클릭되었습니다
if(this.className.indexOf("active") !=-1) 
{ 
return 
} 
//데이터 가져오기
var i = $(this).attr("pic"); 
//표시할 텍스트 내용을 가져오고 
var t=$(this).attr("text" ).split("|"); 
//투명도를 조절하여 텍스트의 페이드 아웃을 변경하고 애니메이션 효과를 변경합니다
$("#frontText").fadeOut()$ ("#frontTextBack") .fadeOut(); 
$("#frontTextSub").fadeOut() 
//현재 활성화된 img를 처리하고 원래 상태로 복원
$("li img.active").animate({top: 5,width:52,left:10},300) 
.removeClass("active") 
.fadeTo(200,0.6) 
//프로세스 현재 활성 img 
$(this ).animate({top:-5,width:40,height:70,left:1},300) 
.addClass("active") 
.fadeTo (200,1) 
// 표시된 div의 큰 이미지 처리 
$("#back").children().addClass("gray").end() 
.fadeIn(500 ,0.1,function(){ 
$ (this).children("img").attr("src","imgaes/" i ".jpg").removeClass("gray") 
$ (this).fadeTo(500,1,function (){ 
$("#frontText").html(t[0]).fadeIn(200); //텍스트 변경 
$("# frontTextBack").html(t[0]) .fadeIn(200); //그림자 텍스트
$("#frontTextSub").html(t[1]).fadeIn(200)} //자막
); 
}); 
}); 
//첫 번째 사진 초기화 
show(); (){ 
if (i= =$("li img").size()) i = 0 
$("li img").eq(i).click() 
i ; 
//setTimeout(show( ),1000) 
} 