jquery에서 $.fn 및 이미지 스크롤 효과를 구현하는 방법-JS 튜토리얼-php.cn

jquery에서 $.fn 및 이미지 스크롤 효과를 구현하는 방법

小云云

풀어 주다： 2018-01-17 14:01:16

원래의

1658명이 탐색했습니다.

그림 스크롤 효과는 모두에게 친숙하다고 생각합니다. Bad Street의 렌더링은 아래와 같습니다. 하지만 이를 구현하려면 jquery, IIFE, setInterval의 기본을 마스터해야 합니다. and $.fn 사용법: Picture 스크롤링 효과는 다들 사용해 보셨을 텐데요. 아주 간단한 효과인 것 같습니다. 능숙하게 익히려면 jquery, IIFE, setInterval 및 $ 사용법을 알아야 합니다. fn 다음 글에서는 jquery의 $.fn과 $.fn을 주로 소개하고 있는데, 이미지 스크롤 효과를 만들기 위해 필요한 지식이 필요한 친구들은 참고하면 됩니다.

Usage of $.fn in jquery

$.fn은 jquery 소스 코드를 연구했다면 소스 코드에서 다음 코드를 찾는 것이 어렵지 않습니다. 그래서 jquery.fn은 jquery.prototype의 약자이기도 합니다. 소스 코드에서 호출되는 생성자 jquery() 인스턴스는 실제로 jquery.fn.init()의 인스턴스입니다.

코드는 다음과 같습니다.

jquery.fn=jquery.prototype={
 init:function(selector,context){
 /*
 *code
 */
 }
}

로그인 후 복사

이후 후속 코드는 jquery.fn.init.prototype=jquery.fn을 실행하고 생성자 jquery의 프로토타입 객체를 사용하여 jquery.fn.init의 프로토타입 객체를 덮어썼습니다. (), 그러면 jquery.fn이 init 인스턴스에서도 jquery()의 프로토타입 메서드와 속성에 액세스할 수 있습니다.

플러그인 개발 방법: $.fn을 사용하여 jquery를 확장하여 새로운 메서드를 생성합니다.

1. jquery.extend(object)를 사용하여 jquery 클래스 자체를 확장하고 클래스에 새 메서드를 추가할 수 있습니다.

2. jquery.fn.extend(object)를 사용하여 jquery 객체에 메서드를 추가합니다.

다음은 jquery.extend(object)를 사용하여 jquery 클래스를 확장하고 클래스 메서드를 추가합니다.

jQuery = function( selector, context ) {
 //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new，并在后面定义了别名$;
 //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

로그인 후 복사

$.add(1,2)를 직접 사용할 수 있습니다.//3

다음은 jquery를 사용합니다. fn.extend(object)는 메소드를 jquery.prototype으로 확장합니다.

$.extent({ 
 add: function(a,b){
 return a+b;
 }
})

로그인 후 복사

앞으로는 $("p").function name()을 직접 사용할 수 있습니다.

jquery에서 $.fn을 사용하여 이미지 스크롤 플러그인을 캡슐화합니다.

이 플러그인은 널리 사용되는 플러그인입니다. 그러나 구체적으로 구현하는 방법은 아래를 계속 읽으십시오. 이 플러그인의 가장 중요한 부분은 js의 구현입니다. HTML과 CSS는 매우 간단하므로 자세히 설명하지 않습니다. 다음 지식 항목 중 일부에 이미 익숙하다면 선택적으로 건너뛸 수 있습니다.

setInterval()

setInterval()은clearInterval이 호출되거나 창이 닫힐 때까지 지정된 시간에 따라 함수를 계속 호출할 수 있습니다.

$.fn.extend({
 [函数名]：fucntion(){
 /*code*/
 }
});

로그인 후 복사

그래서 그림 스크롤을 할 때 마우스 포인터가 그림 위에 있을 때 그림 스크롤을 중지해야 합니다. 여기서 설정은 매우 간단합니다. on('mouseup,mouseover',fucntion(){}만 추가하면 됩니다. ) 이벤트;

구체적인 구현 코드는 다음과 같습니다:

setInterval(fucntion(){/*code*/},[time])
clearInterval(val_of_seInterval)//参数为setInterval的返回值

로그인 후 복사

그림이 계속 스크롤될 수 있는지 확인하세요

설계 중에는 li.length를 스크롤한 후 그림이 사라지는 것을 절대 원하지 않습니다. 따라서 센티널 인덱스를 설정하십시오.

var time=setInterval(picTime,par.time);
/*
*code
*/
$(this).on('mouseup,mouseover',fucntion(){
 clearInterval(time);
 })

로그인 후 복사

마찬가지로 이전 사진이나 다음 사진을 클릭할 때 계속 반복될 수 있도록 센트리도 설정해야 합니다.

IIFE

플러그인이 정의되고 호출된 후 브라우저가 로드될 때 플러그인 효과가 즉시 표시되기를 원할 것입니다. 그런 다음 빠른 로딩을 달성하고 다른 코드의 방해를 받지 않도록 IIFE를 사용하여 이 플러그인을 구성해야 합니다. 괄호 안의 함수 선언은 js에서 유효하지 않으므로 괄호로 묶인 함수를 함수 표현식이라고 합니다.

IIFE의 두 가지 형식은 다음과 같습니다. 익명 함수 끝에 괄호가 나타나고 함수를 호출하려는 경우 해당 함수가 함수 선언으로 기본 설정됩니다. 괄호로 함수를 감싸면 기본적으로 함수 선언이 아닌 표현식으로 함수를 구문 분석합니다.

var index=0;
fucntion picTime(){
 index++;
 if(index=li.length){
 index=0;
 }
 showpicture(index);
}

로그인 후 복사

IIFE를 이해하기 위해 먼저 Niuke의 질문을 사용하겠습니다.

(function(){}());
(function(){})();

로그인 후 복사

이것은 myObject 개체를 참조하므로 첫 번째 것은 확실히 bar를 출력하고 self는 this의 변수이므로 이것과 동일하므로 첫 번째는 두 번째 출력은 여전히 바입니다. 아래에 나타나는 것은 위에서 정의한 첫 번째 IIFE 형식입니다. 이때 익명 함수는 창을 가리켜야 하므로 최종 자체는 정의되지 않습니다. 범위가 정의되지 않았으므로 상위 범위의 자체가 위쪽으로 발견되므로 네 번째 출력은 여전히 막대입니다.

그림 특수 효과 js 코드의 낮은 구성 버전

많은 사람들이 댓글을 추가했습니다. jquery와 js에 대한 탄탄한 지식이 있다면 확실히 어렵지 않을 것입니다.

var myObject = { 
 foo: "bar", 
 func: function() { 
 var self = this; 
 console.log(this.foo); 
 console.log(self.foo); 
 (function() { 
 console.log(this.foo); 
 console.log(self.foo); 
 }()); 
}};
 myObject.func();

로그인 후 복사