So implementieren Sie $.fn- und Bildlaufeffekte in JQuery

Ich glaube, der Bildlaufeffekt ist jedem bekannt. Der js-Implementierungscode ist jedoch sehr kurz. Sie müssen die Grundlagen von jquery, IIFE, beherrschen , setInterval und die Verwendung von $.fn: Ich glaube, jeder hat den Bild-Scroll-Effekt verwendet. Es scheint ein sehr einfacher Effekt zu sein. Wenn Sie ihn kompetent beherrschen möchten, müssen Sie die Grundlagen von jquery, IIFE, setInterval und dem kennen Verwendung von $.fn. Der folgende Artikel stellt hauptsächlich die $.fn in jquery vor. Die notwendigen Kenntnisse zum Erstellen von Fn- und Bildlaufeffekten können Freunde in Anspruch nehmen.

Verwendung von $.fn in jquery

$.fn ist der Namespace von jquery, wenn Sie den Jquery-Quellcode studiert haben Nicht schwierig. Ich habe den folgenden Code im Quellcode gefunden:

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

Jquery.fn ist also die Abkürzung von jquery.prototype. Die von unserem Quellcode aufgerufene Konstruktorinstanz jquery() ist tatsächlich eine Instanz von jquery.fn.init().

Der Code lautet wie folgt:

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

Danach führte der nachfolgende Code jquery.fn.init.prototype=jquery.fn aus und verwendete das Prototypobjekt des Konstruktors jquery für Überschreiben Sie das Prototypobjekt von jquery.fn.init( ), sodass die jquery.fn.init-Instanz auch auf die Prototypmethoden und Eigenschaften von jquery() zugreifen kann.

So entwickeln Sie Plug-Ins: Verwenden Sie $.fn, um jquery zu erweitern und neue Methoden zu generieren.

1. Sie können jquery.extend(object) verwenden, um die Jquery-Klasse selbst zu erweitern und der Klasse neue Methoden hinzuzufügen.

2. Verwenden Sie jquery.fn.extend(object), um Methoden zum jquery-Objekt hinzuzufügen.

Im Folgenden wird jquery.extend(object) verwendet, um die Jquery-Klasse zu erweitern und Klassenmethoden hinzuzufügen:

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

Sie können $.add(1,2);/ verwenden / 3

Im Folgenden wird jquery.fn.extend(object) verwendet, um eine Methode auf jquery.prototype zu erweitern.

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

Sie können $(“p”).function name() in Zukunft direkt verwenden.

Verwenden Sie $.fn in jquery, um ein Plug-in zum Scrollen von Bildern zu kapseln

Dies ist ein weit verbreitetes Plug-in, Sie wissen, was es ist. Doch wie Sie es konkret umsetzen, lesen Sie weiter unten. Der wichtigste Teil dieses Plug-Ins ist die Implementierung von js. HTML und CSS sind sehr einfach und werden nicht im Detail beschrieben. Wenn Sie mit einigen der folgenden Wissenspunkte bereits vertraut sind, können Sie diese optional überspringen.

setInterval()

setInterval() kann die Funktion kontinuierlich entsprechend der angegebenen Zeit aufrufen, bis clearInterval aufgerufen oder das Fenster geschlossen wird.

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

Wenn wir also einen Bildlauf durchführen und sich der Mauszeiger auf dem Bild befindet, müssen wir den Bildlauf stoppen. Die Einstellung hier ist sehr einfach, fügen Sie einfach ein on('mouseup,mouseover' hinzu. ,fucntion(){ }) event;

Der spezifische Implementierungscode lautet wie folgt:

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

Stellen Sie sicher, dass das Bild kontinuierlich in einer Schleife scrollen kann

Beim Entwerfen , wir wollen auf keinen Fall, dass das Bild bis zum Ende scrollt. Legen Sie also einen Sentinel-Index fest.

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

In ähnlicher Weise müssen wir beim Klicken auf das vorherige oder nächste Bild auch einen Wachposten festlegen, damit die Schleife fortgesetzt werden kann.

IIFE

Sie möchten auf jeden Fall, dass der Plug-In-Effekt sofort angezeigt wird, wenn der Browser geladen wird, nachdem das Plug-In definiert und aufgerufen wurde. Dann müssen Sie IIFE verwenden, um dieses Plug-In zu erstellen, um ein schnelles Laden zu erreichen und nicht durch andere Codes beeinträchtigt zu werden. Da die Funktionsdeklaration in Klammern in js ungültig ist, wird die in Klammern eingeschlossene Funktion als Funktionsausdruck bezeichnet.

Die beiden Formen von IIFE sind wie folgt: Wenn am Ende einer anonymen Funktion Klammern erscheinen und Sie eine Funktion aufrufen möchten, wird die Funktion standardmäßig als Funktionsdeklaration verwendet. Wenn eine Funktion in Klammern eingeschlossen wird, wird die Funktion standardmäßig als Ausdruck und nicht als Funktionsdeklaration geparst.

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

Verwenden wir zunächst eine Frage von Niuke, um IIFE zu verstehen:

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

Da sich dies auf das myObject-Objekt bezieht, gibt das erste definitiv bar aus und self ist die Variable Davon ist die zweite Ausgabe gleich. Was unten erscheint, ist die erste IIFE-Form, die wir oben definiert haben. Zu diesem Zeitpunkt muss die anonyme Funktion sofort ausgeführt werden, und sie zeigt auf das Fenster So Die Ausgabe ist undefiniert und das letzte Selbst ist nicht in seinem eigenen Bereich auf Blockebene definiert. Daher wird das Selbst des übergeordneten Bereichs nach oben gefunden, sodass die vierte Ausgabe immer noch bar ist.

Version des JS-Codes für Bildspezialeffekte mit niedriger Konfiguration

Viele von ihnen haben Kommentare hinzugefügt: Wenn Sie über solide Kenntnisse in JQuery und JS verfügen, wird es definitiv nicht schwierig sein.

//$()调用jquery对象 ，IIFE
$(function () {
 $.fn.ScrollPic = function (params) {
 //
 return this.each(function () {
 var defaults = {
 ele: '.slider',//切换对象
 Time: '2000',//自动切换时间
 speed: '1000',//图片切换速度
 scroll: true,//是否滚动图片,虽然肯定是让它滚动的，但是我们还是设置一个意思一下。
 arrow: false,//是否设置箭头
 number: true//是否添加右下角数字
 };
 //定义默认参数，其中若在html页面设置了param是，这里的params会替换defaults
 var par = $.extend({}, defaults, params);
 var scrollList = $(this).find('ul');//找到ul标签元素
 var listLi = $(this).find('li');//找到li标签元素
 var index = 0;
 var pWidth = $(this).width();
 var pHeight = $(this).height();
 var len = $(this).find("li").length;//<li>标签数量
 //设置li标签和img的宽、高
 listLi.css({ "width": pWidth, "height": pHeight });
 listLi.find('img').css({ "width": pWidth, "height": pHeight });
 //设置ul标签的宽值为li的len倍/overflow:hidden
 scrollList.css("width", pWidth * len);
 //图片循环滚动的关键所在
 function picTimer() {
 index++;
 if (index == len) { index = 0; }
 showPics(index);
 }
 //自动切换函数
 if (par.scroll)
 {
 var time = setInterval(picTimer, par.Time);
 } else {
 $(".page-btn").hide();
 }
 function showPics(index) {
 var nowLeft = -index * pWidth;
 //添加向左移动的特效
 $(this).find(scrollList).animate({ "left": nowLeft }, par.speed);
 //找到与index相等的那个按钮，添加类名current，并将每个同胞元素移除类名current
 $(this).find(paging).eq(index).addClass('current').siblings().removeClass('current');
 }
 //鼠标经过数字按钮的效果
 if (par.number) {
 $(this).append('<p class="page-btn"></p>');
 for (i = 1; i <= len; i++) {
 $(this).find(&#39;.page-btn&#39;).append(&#39;<span>' + i + '</span>')
 }
 var paging = $(this).find(".page-btn span");
 paging.eq(index).addClass('current');
 $(this).find(paging).on('mouseup mouseover',function (e) {
 e.preventDefault();
 //获取按钮之间的相对位置,注意这里的$(this)。
 index = $('p').find(paging).index($(this));
 showPics(index)
 });
 }
 //上一张，下一张效果
 if (par.arrow) {
 $(this).append('<span class="leftarrow"></span><span class="rightarrow"></span>')
 var prev = $(this).find('span.leftarrow');
 var next = $(this).find('span.rightarrow');
 prev.on('click',function (e){
 e.preventDefault();
 index -= 1;
 if (index == -1) { index = len - 1; }
 showPics(index);
 });//上一页
 next.on('click',function (e){
 e.preventDefault();
 index += 1;
 if (index == len) { index = 0; }
 showPics(index);
 });
 }
 //停止图片的滚动
 $(this).on('moveseup mouseover',function (e) {
 clearInterval(time);
 });
 //清除计时器
 $(this).on('mouseleave',function (e) {
 if (par.scroll) { time = setInterval(picTimer, par.Time); } else { clearInterval(time); $(this).find('$(".page-btn")').hide() }
 });
 })
}
});

Verwandte Empfehlungen:

[Transfer] div+css image scrolling effect_html/css_WEB-ITnose

jQuery + CSS, um einen Bild-Scroll-Effekt zu erzielen (mit Quellcode)_jquery

Kleine JS-Funktion (offsetLeft, um einen Bild-Scroll-Effekt zu erzielen) Beispielcode_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonSo implementieren Sie $.fn- und Bildlaufeffekte in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!