jqueryで$.fnと画像スクロール効果を実装する方法-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-17 14:01:16

オリジナル

1604 人が閲覧しました

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();

ログイン後にコピー