주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술

이전 기사에 이어 이제 두 번째 부분이 나옵니다.
시작하기 전에 위에서 언급한 모든 함수를 클로저에 작성하는 것과 관련된 최적화 문제에 대해 이야기해 보겠습니다. 앞서 언급했듯이 초기화 중에 init만 호출하면 되므로 클로저에 init만 작성하면 되고, init의 프로토타입 상속 방식으로 다른 기능 함수를 호출할 수 있습니다. 따라서 이전 코드는 실제로 다음과 같이 다시 작성할 수 있습니다.

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

var Hongru= {};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(options){ //옵션 매개변수: id(필수): 사진 목록 상위 태그 id; auto(선택): 자동 실행 시간(선택): 실행 시작 그림 일련번호
var wp = H$(options.id), // 그림 목록의 상위 요소 가져오기
ul = H$$('ul',wp)[0], // 가져오기
li = this .li = H$$('li',ul);
this.a = options.auto?options.auto:2; //자동 실행 간격
this.index = 옵션. position?options.position :0; //실행을 시작할 사진 일련번호(0부터 시작)
this.l = li.length;
this.cur = this.z = 0; 표시된 사진 일련번호&&z-index 변수
this.pos(this.index); //변형 함수
}
init.prototype = {
auto:function(){
this.li .a = setInterval(new Function ('Hongru.fader.move(1)'),this.a*1000)
},
move:function(i){//매개변수에는 두 가지 옵션이 있습니다. i, 1 및 -1,1 다음으로 실행됨을 의미하고, -1은 이전으로 실행됨을 의미합니다.
var n = this.cur i
var m = i==1?n==this; .l?0:n:nthis.pos(m) / /이전 또는 다음 카드로 변환 Zhang
},
pos:function(i){
clearInterval(this.li.a)
this.z; i].style.zIndex = this .z; //다음 사진의 z-index를 1씩 증가시킵니다
this.cur = i; //현재 표시된 사진의 올바른 일련번호를 바인딩합니다
this.auto(); //자동 실행
}
}
return {init:init}
}();

그러나 이것은 실제로 문제가 됩니다. 이렇게 다시 작성하면 찾을 수 있을지 모르겠습니다. 더 이상 auto 함수에서 'Hongru.fader.move()'를 호출할 수 없습니다. 그러면 일부 사람들은 이것이 정의되지 않는다고 말할 것입니다. init의 프로토타입 상속을 수행한 다음 'Hongru.fader.init.move() )'를 호출하는 것이 맞습니까? 사실, 나는 이전 기사 http://www.cnblogs.com/hongru/archive/2010/10/09/1846636.html에서 이 문제를 논의한 적이 있습니다. , 따라서 이 작업을 수행할 때 두 가지 문제에 주의해야 합니다.
하나는 초기화 중에 init를 인스턴스화하기 위해 new 키워드를 사용하는 것입니다.
다른 하나는 코드 내에서 프로토타입 메소드를 호출할 때 인스턴스화한 객체를 통해서도 호출해야 한다는 것입니다. 예를 들어 위 코드를 초기화할 때 다음과 같아야 합니다

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

var newFader = new Hongru.fader.init({ //이 새로운 내용은 매우 important
id:'fader'
})

코드에서 init 메소드를 호출하려면 다음과 같은 새 인스턴스화 객체 newFader를 통해 호출해야 합니다. 위의 auto 함수 init의 move 메소드를 호출하려면 'newFader.move()'를 직접 호출하면 됩니다.
하지만 작은 문제가 있습니다. 즉, 인스턴스화된 변수 이름이 코드에서 호출되는 이름과 일치해야 합니다. 따라서 newFader1을 사용하는 등 초기화 객체의 이름을 변경하면 이는 확실히 불가능하므로 init에 매개변수를 하나 더 전달하고 초기화할 때 변수 이름을 매개변수와 일치하게 만든 다음 소스 코드의 매개변수를 통해 호출하는 것이 약간의 트릭입니다. 이런 식으로 문제가 성공적으로 해결됩니다.
(ps: 코드에서 new Function을 사용하는 이유도 스코프 체인을 깨뜨릴 수 있기 때문입니다. 이는 코드를 이런 방식으로 구성할 수 있는 조건 중 하나이기도 합니다.)
에서 요약: 이전 코드는 다음과 같아야 합니다. 최적화:

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

var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c) }
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init: function(options){ //옵션 매개변수: id (필수): 사진 목록 상위 태그 id; auto (선택 사항): 자동 실행 시간; index (선택 사항): 시작 사진 일련 번호
var wp = H$(options. id), // 사진 목록의 상위 요소를 가져옵니다
ul = H$$('ul',wp)[0], // 가져옵니다
li = this.li = H$$( 'li ',ul);
this.a = options.auto?options.auto:2; //자동 실행 간격
this.index = options.position?options.position:0 //실행 시작 그림 일련번호(0부터 시작)
this.l = li.length;
this.cur = this.z = 0; //현재 표시된 사진 일련번호&&z-index 변수
this.pos( .index); //변환 함수
},
auto:function(){
this.li.a = setInterval(new Function(this.anthor '.move(1)'),this . a*1000);
},
move:function(i){//매개변수 i에는 1과 -1의 두 가지 옵션이 있으며, 1은 다음 항목으로 실행을 의미하고 -1은 다음 항목으로 실행을 의미합니다. 이전 것.
var n = this.cur i
var m = i==1?n==this.l?0:n:nthis.pos(m) //이전 또는 다음 사진으로 변환
},
pos: function(i ){
clearInterval(this.li.a);
this.z;
this.li[i].style.zIndex = this.z; 매번 인덱스 + 1
this.cur = i; //현재 표시된 이미지의 올바른 일련번호 바인딩
this.auto() //자동 실행
}
}
return {init: init}
}();

다음과 같이 초기화해야 합니다:

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

var fader = new Hongru.fader.init('fader',{ //첫 번째 매개변수가 변수 이름과 일치하는지 확인하세요
id :'fader'
}) ;

자, 코드 최적화 계획은 여기서 끝납니다. 다음은 효과의 두 번째 부분 구현입니다. 페이드 인 및 페이드 아웃 효과
사실 위의 좋은 코드 구조와 로직을 사용하면 페이드 인 및 페이드 아웃 효과를 추가하는 것이 비교적 쉽습니다. 변경하기 전에 그림을 투명하게 만든 다음 타이머를 통과하여 점차 투명도를 높이는 방법은 매우 간단합니다. 그러나 더 중요한 몇 가지 경계 판단이 있습니다. 동시에 IE와 비 IE에서 투명성을 변경할 때 다른 CSS 속성을 사용하는 데 주의해야 합니다.
핵심 코드의 변경 사항은 다음 두 문단입니다. 하나는 투명도 그라데이션 함수 fade()를 추가하는 것이고, 다른 하나는 pos()에서 먼저 이미지를 투명하게 만든 다음 fade를 실행하는 것입니다. ()
pos()에 코드 세그먼트 추가:

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

if(this .li[i].o>=100){ //페이드 인하기 전에 이미지 투명도를 투명으로 설정합니다.
this.li[i].o = 0
this. li[i].style .opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)'
}
this.li[i].f = setInterval(new Function(this .anthor '.fade(' i ')'),20);

그런 다음 fade() 함수를 추가합니다

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

fade:function(i){
if(this.li[i].o> =100){
clearInterval (this.li[i].f); //투명도 변경이 완료되면 타이머를 클리어
if(!this.li.a){ //모든 타이머가 있는지 확인 자동 운전을 시작하기 전에 지워집니다. 그렇지 않으면 컨트롤러를 너무 빨리 클릭하면 타이머가 지워지기 전에 다음 변경을 시작하고 기능이 엉망이 됩니다.
this.auto();
}
}
else{ //투명도 변경
this.li[i].o =5
this.li[i].style.opacity = this.li[i].o/100; .li[ i].style.filter = 'alpha(opacity=' this.li[i].o ')';
}
}

그렇습니다. 간단합니다. . 하지만 기억해야 할 또 다른 점은 pos() 호출 시작 시 마지막 타이머를 지워야 한다는 점입니다! !
아래 전체 소스 코드 게시:

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

var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c) }
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init: function(options){ //옵션 매개변수: id (필수): 사진 목록 상위 태그 id; auto (선택 사항): 자동 실행 시간; index (선택 사항): 시작 사진 일련 번호
var wp = H$(options. id), // 사진 목록의 상위 요소를 가져옵니다
ul = H$$('ul',wp)[0], // 가져옵니다
li = this.li = H$$( 'li ',ul);
this.a = options.auto?options.auto:2; //자동 실행 간격
this.index = options.position?options.position:0 //실행 시작 그림 시리즈 number (0부터 시작)
this.l = li.length;
this.cur = this.z = 0; //현재 표시된 사진 일련번호&&z-index 변수
/* == fade- 인 및 페이드 아웃 기능 ==*/
for(var i=0;ithis.li[i].o = 100 //각 사진에 하나씩 설정; 투명도 변경
this.li[i].style.opacity = this.li[i].o/100; //IE가 아닌 경우 불투명도를 사용하세요
this.li[i].style.filter = 'alpha(opacity=' this.li[i].o ')'; //IE 필터
}
this.pos(this.index); //변환 함수
},
auto:function(){
this.li.a = setInterval(new Function(this.anthor '.move(1)'),this.a*1000);
},
move: function(i){//매개변수 i에는 1과 -1의 두 가지 옵션이 있습니다. 1은 다음 그림으로 실행을 의미하고, -1은 이전 그림으로 실행을 의미합니다.
var n = this.cur i; var m = i==1?n==this.l?0:n:nthis.pos(m); //이전 또는 다음 그림으로 변환
},
pos:function(i){
clearInterval(this.li.a); 자동 변경 타이머
clearInterval(this.li[i].f); //페이드 효과 타이머 지우기
this.z
this.li[i].style.zIndex = this.z ; //다음 사진의 z-index를 1씩 증가시킵니다
this.cur = i; //현재 표시된 사진의 올바른 일련번호를 바인딩합니다
this.li.a = false; 아래에서 사용할 마크를 만들어 클리어 타이머가 완료되었음을 나타냅니다.
//this.auto() //자동 실행
if(this.li[i].o>=100) { // 이미지가 페이드 인되기 전에 이미지 투명도를 투명으로 설정합니다
this.li[i].o = 0
this.li[i].style.opacity = 0
this; li[i] .style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anthor '.fade(' i ') '),20 );
},
fade:function(i){
if(this.li[i].o>=100){
clearInterval(this.li[i] .f); //투명도 변경이 완료되면 타이머를 클리어
if(!this.li.a){ //자동 운전을 시작하기 전에 모든 타이머가 클리어되었는지 확인하세요. 그렇지 않으면 컨트롤러를 너무 빨리 클릭하면 타이머가 지워지기 전에 다음 변경을 시작하고 기능이 엉망이 됩니다.
this.auto();
}
}
else{
this.li[i].o =5;
this.li[i].style.opacity = this.li[i].o/100; ].style .filter = 'alpha(opacity=' this.li[i].o ')'
}
}
}
return {init:init}
}( );


내가 쓴 메모에 모두 주의를 기울여야 합니다.

런닝 효과를 살펴보겠습니다.

2단계<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;} --></style> <div id="fader"> <ul> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745247.jpg" class="lazy" _mce_ alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745483.jpg" class="lazy" _mce_ alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745113.jpg" class="lazy" _mce_ alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745525.jpg" class="lazy" _mce_ alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술"> </li> <li> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201010/20101011214745668.jpg" class="lazy" _mce_ alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전식 플러그인을 작성하는 방법을 단계별로 가르쳐주세요. (2)_javascript 기술"> </li> </ul> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

여기서 페이드 인과 페이드 아웃은 단지 제목일 뿐이라는 것을 눈치채신 분들도 있을 것입니다. 사실 페이드 인 효과만 있을 뿐 기본적으로 효과는 페이드 아웃과 동일합니다. 페이드 아웃하고 싶은 경우에도 문장 두 개만 바꾸면 됩니다. ㅎㅎ
이 부분은 여기서 마치고 다음 부분에서는 컨트롤러를 추가하겠습니다.