jqueryで$.fnと画像スクロール効果を実装する方法

Bad Street のレンダリングは非常に短いですが、これを実行するには、jquery、IIFE、setInterval の基本を習得する必要があります。と $.fn の使用法: 画像 スクロール効果は非常に単純だと思いますが、それを使いこなしたい場合は、jquery、IIFE、setInterval、および $ の使用法の基本を理解する必要があります。 fn. 次の記事では、jquery の $.fn と $.fn を中心に紹介します。画像スクロール効果を作成するために必要な知識が必要な友人は、それを参照してください。

jquery での $.fn の使用法

$.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 は 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 の 2 つの形式は次のとおりです: 匿名関数の末尾に括弧があり、関数を呼び出したい場合、関数宣言としてデフォルトで関数が使用されます。括弧で関数を囲む場合、デフォルトでは関数宣言ではなく式として関数が解析されます。

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

まず IIFE を理解するために Niuke からの質問を使用しましょう:

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

これは myObject オブジェクトを参照しているため、最初のものは間違いなく bar を出力します。self は this の変数であり、this と等しいので、最初の2 番目の出力はまだ bar です。この時点では、this はウィンドウを指しているため、最終的な self は未定義です。独自のブロック レベルではスコープが定義されていないため、親スコープの self が上位に見つかり、4 番目の出力は bar のままです。

画像特殊効果 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();

関連おすすめ:

以上がjqueryで$.fnと画像スクロール効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。