이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술

다른 것이 없다면 이것이 이 시리즈의 마지막 부분이 되어야 합니다.
세 번째 부분의 효과는 기본적으로 대부분의 요구 사항을 충족했습니다. 그래서 이 부분은 보너스라고밖에 볼 수 없습니다. 더 이상 고민하지 않고 블로그 게시물을 계속하겠습니다.
실제로 반투명 배경의 노트의 캐러셀 효과는 163, qq, 타오바오 등 온라인에서도 이용 가능합니다. 잘 검색해보시면 비슷한 효과를 보실 수 있으실 겁니다. 텍스트를 추가하는 방법은 사실 이전 글에서 컨트롤러를 추가하는 방법과 유사합니다. 다른 요소를 추가하고 내부에 텍스트를 표시하는 것 이상입니다.

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

/* -- 메모 표시--* /
var alt = this.alt = document.createElement('p'); //텍스트를 표시하려면 p 태그를 추가하세요.
this.img = []
for(var k=0;kthis.img.push(H$$('img',this.li[k])[0]) //캐러셀 모듈에서 그림을 추출합니다. 목적은 다음과 같습니다. get alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight
alt.style.cssText; '높이:' this.textH 'px;줄 높이:' this.textH 'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0; 하단: 0;overflow:hidden;width:100%; background:#000;opacity:0.7;filter:alpha(opacity=70);'; //이 레이어에 스타일 추가

위의 init() 함수에는 두 개의 코드가 추가되었습니다. 모두 이해하기 쉽습니다. 자세한 내용은 다루지 않겠습니다. 게다가. 또한 변환 기능에서 z-index 값을 변경하여 컨트롤러가 가장 높은 수준인 텍스트 수준에 있도록 하고 동시에 이 텍스트 레이어에 대체 텍스트를 쓰십시오. 슬라이딩 효과가 필요한 경우 지우십시오. pos() 에서 높이를 0으로 설정하려면 fade()에서 높이 변환을 수행하세요(top 또는 left를 사용할 수도 있음). 따라서 pos()의 코드를 다음과 같이 변경하세요.

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

this.alt.style.zIndex = this.z 1; zIndex = this.z 2;
this.alt.style.height = 0; //노트 레이어의 슬라이딩 효과 만들기
this.alt.innerHTML = this.img [i].alt; //대체 텍스트 삽입


텍스트 레이어에 높이 변경 효과가 있는 경우 fade()에 텍스트 레이어의 높이 변경에 대한 문장을 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다. this.alt.style.height = Math.ceil( this.li[i].o*this.textH/100) 'px' ; //텍스트 슬라이딩 효과 만들기

이제 거의 다 되었습니다. 최종 효과를 살펴보겠습니다.

4단계 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} .fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} --></style> <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011221558299.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558299.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221558112.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558112.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221558758.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558758.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221558158.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558158.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221558834.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558834.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (4)_javascript 기술"> </li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
글의 마지막 부분에서 매우 중요한 점을 언급하는 것을 거의 잊었습니다. 바로 옵션의 구성 매개변수입니다.
new Hongru.fader.init()를 인스턴스화할 때 두 번째 매개변수는 구성입니다. 매개변수이며, 선택적 구성 매개변수는 다음과 같습니다.
{
id: //(필수), 캐러셀 목록 상위 요소 id
auto: //(선택) 자동 재생 간격 초
navClass: //(선택 사항) Controller className
curNavClass: //(선택 사항) Controller 현재 상태 className
index: //(선택 사항) 초기화 시 재생을 시작할 위치부터 기본값은 0입니다. 입니다, 첫 번째 요소
}
자, 이번 시리즈는 끝입니다! ! 소스 코드를 직접 변경할 수 있습니다