jquery_jquery를 기반으로 한 방향 그림 그라데이션 애니메이션 효과
- WBOY원래의
- 2016-05-16 18:26:301033검색
또 다른 점은 필터의 사용인데, 한 가지 설명해야 할 점은 필터를 인식할 수 없고 Firefox에서는 그 효과가 보이지 않는다는 것입니다.
코드 작성을 시작하겠습니다
html은 비교적 간단합니다. 🎜>
코드
코드 복사 코드는 다음과 같습니다.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
myjquerydirection < META http-equiv=content-type content="text/html; charset=gb2312">
🎜>
여기에는 id=frontTextBack을 사용하여 그림자가 구현되는 것을 보여줍니다. CSS 필터. 다른 코드에 대해서는 말할 것도 없습니다
이제 CSS 코드 작성을 시작하겠습니다
먼저 최상위 수준에서 코드 작성을 시작합니다
코드 복사
- ;/li>
;div> 푸른 잎이 있는 나무
< li>
섬
; 큰 나무
들판의 해바라기
🎜>여기에는 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)
}
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)
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.