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

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

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

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


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

< li>

섬
;

• ;/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)
}

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

3 몇 주 전 By DDD

KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?

2 몇 주 전 By DDD

Inzoi : 학교 및 대학에 지원하는 방법

4 몇 주 전 By DDD

KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?

2 몇 주 전 By DDD

Atomfall에서 사이트 사무실 키를 찾을 위치

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7870

15

자바 튜토리얼

1649

14

Cakephp 튜토리얼

1407

52

라라벨 튜토리얼

1301

25

PHP 튜토리얼

1244

29

더보기