我不知道如何称呼我的问题,所以我希望你们能帮助我,即使问题的名称不好。
我有一个从github下载的morhpext库。整个代码看起来像这样:
/*!
* Morphext - Text Rotating Plugin for jQuery
* https://github.com/MrSaints/Morphext
*
* Built on jQuery Boilerplate
* http://jqueryboilerplate.com/
*
* Copyright 2014 Ian Lai and other contributors
* Released under the MIT license
* http://ian.mit-license.org/
*/
/*eslint-env browser */
/*global jQuery:false */
/*eslint-disable no-underscore-dangle */
(function ($) {
"use strict";
var pluginName = "Morphext",
defaults = {
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: $.noop
};
function Plugin (element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._init();
}
Plugin.prototype = {
_init: function () {
var $that = this;
this.phrases = [];
this.element.addClass("morphext");
$.each(this.element.text().split(this.settings.separator), function (key, value) {
$that.phrases.push($.trim(value));
});
this.index = -1;
this.animate();
this.start();
},
animate: function () {
this.index = ++this.index % this.phrases.length;
this.element[0].innerHTML = "<span class=\"animated " + this.settings.animation + "\">" + this.phrases[this.index] + "</span>";
if ($.isFunction(this.settings.complete)) {
this.settings.complete.call(this);
}
},
start: function () {
var $that = this;
this._interval = setInterval(function () {
$that.animate();
}, this.settings.speed);
},
stop: function () {
this._interval = clearInterval(this._interval);
},
kalreg: function () {
console.log("call invoked!");
}
};
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery);
它有自己的“函数”- animate、start和stop。不幸的是,这些函数只能从原型内部或回调函数中调用。最后一个函数在每次动画完成时调用(使用setInterval/setTimeout)。我不想等到动画完成后再从回调函数中调用任何东西-我想在任何时候从原型外部停止它。因此,如果我使:
$(".title").Morphext({
animation: [ "bounceIn"],
speed: (1000,
complete: function () {
if (this.index === this.phrases.length - 1) {
this.stop();
};
}
我也会随时启动原型中的一些东西。我创建了一个函数“kalreg”(上面提到的第一个)。我的意思是这样的:
$(".title").kalreg()
或
$(".title").Morphext().kalreg()
或
$(".title").Morphext(kalreg())
换句话说就是:我想调用kalreg函数,它是Morphext原型的一部分,可以在任何时候在任何DOM元素上调用,也可以在代码的任何部分调用。怎么做?
4条答案
按热度按时间pxq42qpu1#
您可以像下面这样构建插件:
h5qlskok2#
你提到的插件在功能上看起来很有限。你说的是在执行过程中停止动画,它需要一些重新创作才能正常工作。
你会更好地服务于一个更强大的动画包,这听起来像。我强烈推荐Greensock / TweenMax库。
cwtwac6a3#
我是这个项目的作者,从 'outside' 调用这些方法是非常简单的(尽管我真的应该更好地记录它)。
实际上,当最初添加
stop()
和start()
时,添加它们的目的是允许您从外部停止/启动它(除了回调之外)。除非我误解了您的问题,否则您可以通过执行类似以下操作来实现您想要实现的目标:
上述内容记录在release notes中。
默认的功能是有意限制的,但是它们很容易扩展。
希望能帮上忙。如果不行就告诉我。
p8ekf7hl4#
随时更改属性的简单方法是从css事件中输入方法,然后访问
$self.settings.method_name
或$self.settings.default_value
之类的值。例如:在某些方法上或在init上:
这里我做了一个例子。我改变并添加了方法morphext.js,这样你就可以看到我可以像往常一样从内部改变插件的一些默认值。如果你想与其他dom元素而不是xml数据交互,你可以添加 AJAX 方法并响应传入的更改数据。是的,ajax post方法将从远程在线检查中响应。这里是www.example.com的地址链接infinityfree.net:https://viena.lovestoblog.com/Morphext/05/index.html
它仍然有限制的影响,因为我不知道如何安装主机共享。是的,无论如何感谢任何尊重和关注。