多对象的Javascript通用函数(Raphael JS)
我正在使用Raphael JS库,试图创建一个可以应用于任何目标的hoverIn和hoverOut函数 我认为问题在于缺少通过引用传递的函数(我对JavaScript非常陌生) 创建一组路径并添加属性以查看它们之后:多对象的Javascript通用函数(Raphael JS),javascript,raphael,pass-by-reference,Javascript,Raphael,Pass By Reference,我正在使用Raphael JS库,试图创建一个可以应用于任何目标的hoverIn和hoverOut函数 我认为问题在于缺少通过引用传递的函数(我对JavaScript非常陌生) 创建一组路径并添加属性以查看它们之后: Services = rsr.set(); Services.push( rsr.path("M698.5,98.617V96.09c0.289,0.256,0.636,0.484,1.04,0.689 c0.403,0.203,0.829,0.375,1.276,
Services = rsr.set();
Services.push(
rsr.path("M698.5,98.617V96.09c0.289,0.256,0.636,0.484,1.04,0.689 c0.403,0.203,0.829,0.375,1.276,0.516c0.445,0.143,0.896,0.25,1.347,0.326c0.45,0.078,0.867,0.113,1.251,0.113 c1.318,0,2.305-0.242,2.955-0.732s0.977-1.193,0.977-2.111c0-0.496-0.106-0.922-0.325-1.291c-0.217-0.365-0.517-0.699-0.898-1.002 c-0.383-0.301-0.836-0.592-1.359-0.865c-0.521-0.275-1.088-0.568-1.689-0.875c-0.64-0.32-1.235-0.648-1.788-0.982 c-0.555-0.33-1.033-0.697-1.442-1.098c-0.408-0.398-0.729-0.854-0.964-1.359c-0.235-0.504-0.351-1.1-0.351-1.781 c0-0.834,0.184-1.561,0.549-2.178c0.366-0.615,0.846-1.125,1.442-1.525c0.596-0.398,1.273-0.697,2.036-0.893 c0.761-0.197,1.537-0.295,2.328-0.295c1.804,0,3.119,0.219,3.943,0.65v2.412c-1.082-0.748-2.468-1.123-4.161-1.123 c-0.468,0-0.938,0.051-1.404,0.148c-0.469,0.098-0.885,0.258-1.251,0.479c-0.367,0.223-0.665,0.504-0.894,0.854 c-0.23,0.35-0.346,0.775-0.346,1.275c0,0.471,0.087,0.873,0.262,1.215c0.174,0.342,0.433,0.65,0.772,0.932 c0.341,0.281,0.754,0.555,1.244,0.818c0.488,0.264,1.052,0.555,1.69,0.865c0.653,0.324,1.275,0.666,1.862,1.021 c0.587,0.357,1.103,0.754,1.546,1.188c0.441,0.432,0.793,0.916,1.054,1.443c0.258,0.525,0.389,1.133,0.389,1.811 c0,0.904-0.178,1.666-0.53,2.293c-0.353,0.625-0.828,1.137-1.43,1.523c-0.599,0.393-1.291,0.676-2.074,0.852 s-1.608,0.264-2.477,0.264c-0.29,0-0.646-0.025-1.071-0.072c-0.427-0.049-0.859-0.117-1.303-0.203 c-0.443-0.09-0.862-0.201-1.258-0.332C699.055,98.926,698.737,98.777,698.5,98.617z"),
rsr.path("M722.425,93.344h-9.229c0.033,1.457,0.425,2.58,1.175,3.371 c0.747,0.791,1.776,1.188,3.089,1.188c1.473,0,2.825-0.484,4.061-1.457v1.969c-1.148,0.832-2.669,1.25-4.558,1.25 c-1.847,0-3.299-0.596-4.354-1.781c-1.058-1.188-1.583-2.855-1.583-5.01c0-2.035,0.575-3.691,1.729-4.975 c1.152-1.279,2.584-1.922,4.295-1.922c1.712,0,3.035,0.555,3.972,1.66s1.404,2.643,1.404,4.607L722.425,93.344L722.425,93.344z M720.279,91.57c-0.008-1.211-0.299-2.15-0.875-2.822c-0.574-0.672-1.372-1.01-2.394-1.01c-0.987,0-1.825,0.354-2.515,1.061 c-0.69,0.707-1.114,1.629-1.277,2.771H720.279L720.279,91.57z"))
).attr({
fill: '#010101',
stroke: '#000000',
'stroke-width': 0
});
我通过附加以下内容添加了“悬停入”和“悬停出”事件:
.hover(
function(){Services.animate({"fill": "#128A8F"}, 500),
function(){Services.animate({"fill": "#010101"}, 500));
这个很好用
但是,我正在将此效果应用于脚本中的许多路径,并通过悬停框应用它,因此我需要能够使悬停函数更具可塑性
我尝试在下面将悬停目标泛化为已传递的对象,但可能因为JavaScript是按值传递的,所以它不起作用:
function menuHoverIn(target){
target.animate({
"fill": "#128A8F"
}, 500);
};
function menuHoverOut(target){
target.animate({
"fill": "#010101"
}, 500)
};
那么,如何使上述函数在JavaScript中正常工作呢?我只想对传递的对象设置动画
谢谢大家! 您可以这样做:
var menuHoverIn = function(target) {
target.animate({
"fill": "#128A8F"
}, 500);
};
var menuHoverOut = function(target) {
target.animate({
"fill": "#010101"
}, 500)
};
something.hover( menuHoverIn, menuHoverOut );
这里有两篇关于对象和函数的好文章:和
要设置另一个对象的动画,请执行以下操作:
// Function.prototype.bind polyfill
if ( !Function.prototype.bind ) {
Function.prototype.bind = function( obj ) {
if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
var slice = [].slice,
args = slice.call(arguments, 1),
self = this,
nop = function () {},
bound = function () {
return self.apply( this instanceof nop ? this : ( obj || {} ),
args.concat( slice.call(arguments) ) );
};
bound.prototype = this.prototype;
return bound;
};
}
var menuHoverIn = function(target) {
this.animate({
"fill": "#128A8F"
}, 500);
};
var menuHoverOut = function(target) {
this.animate({
"fill": "#010101"
}, 500)
};
something.hover( menuHoverIn.bind(YourElement), menuHoverOut.bind(YourElement) );
也许你必须做一些调整,但我有一个类似的代码与我一起工作。不要忘记将元素替换为要设置动画的元素。您可以执行以下操作:
var menuHoverIn = function(target) {
target.animate({
"fill": "#128A8F"
}, 500);
};
var menuHoverOut = function(target) {
target.animate({
"fill": "#010101"
}, 500)
};
something.hover( menuHoverIn, menuHoverOut );
这里有两篇关于对象和函数的好文章:和
要设置另一个对象的动画,请执行以下操作:
// Function.prototype.bind polyfill
if ( !Function.prototype.bind ) {
Function.prototype.bind = function( obj ) {
if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
var slice = [].slice,
args = slice.call(arguments, 1),
self = this,
nop = function () {},
bound = function () {
return self.apply( this instanceof nop ? this : ( obj || {} ),
args.concat( slice.call(arguments) ) );
};
bound.prototype = this.prototype;
return bound;
};
}
var menuHoverIn = function(target) {
this.animate({
"fill": "#128A8F"
}, 500);
};
var menuHoverOut = function(target) {
this.animate({
"fill": "#010101"
}, 500)
};
something.hover( menuHoverIn.bind(YourElement), menuHoverOut.bind(YourElement) );
也许你必须做一些调整,但我有一个类似的代码与我一起工作。别忘了用你想要的动画元素替换元素。你的问题很模糊,但我想我明白你的意思了:你只想能够将可重用的悬停函数传递到元素或集合中 在给出解决方案之前,我必须纠正一点:JavaScript不是一种传递值语言,至少不是一直都是这样。JavaScript通过引用传递引用类型(对象),原子类型(字符串、数字、布尔值)通过值传递(除非它们包装在关联的对象类型中) 另外,在我继续之前,我想提供一些关于如何更好地写一些问题的建议(这些问题更有可能得到回答)。首先,试着把你的问题归结为简单易懂的问题。在这种情况下,没有人关心(或想看到)你的漫长道路。你可以用圆圈代替它们,你会有一个更容易阅读的问题。其次,提供重现问题所需的所有信息。并不是每个人都会知道设置Raphael对象所涉及的细节,等等。最好提供一个(对于Raphael这样的库来说可能很棘手,因为它可能没有CDN——但我能够在CDN上找到Raphael的副本)。尝试遵循JavaScript惯例;这将减少试图回答你问题的人之间的困惑。在您的例子中,您调用对象
服务
,这不仅对问题的读者来说是不透明的,而且JavaScript中大写的变量通常是为对象构造函数保留的
好的,接下来是解决方案:
如果查看,您会看到.hover()
包含两个函数,然后是两个上下文对象。这意味着JavaScript使用call
或apply
调用函数,设置函数的上下文(即this
变量),就好像它们是方法调用一样。所以,你想要的是这样的:
var paper = Raphael( 0, 0, 200, 200 ); // create Raphael surface
// re-usable hover functions:
function menuHoverIn(){
// note the use of 'this'; we are animating the 'this' object,
// as if this were a method on an object. JavaScript is very
// flexible this way, and this method can (and will) be called
// as if it were a method of the element you're trying to animate
this.animate({'fill': '#128A8F'}, 500);
};
function menuHoverOut(){
this.animate({'fill': '#010101'}, 500);
};
var set = paper.set(); // create Raphael set; renamed from "Services" in OP
set.push( paper.circle( 50, 50, 25, 25 ) ) // put a circle in the set
.attr({ // set attributes of all elements in set
fill: '#010101',
stroke: '#000',
'stroke-width': 0
})
// provide .hover function for entire set; notice how we pass in set itself
// as the hover in and out context (which will become the 'this' value)
.hover( menuHoverIn, menuHoverOut, set, set );
事实证明,Raphael在默认情况下将上下文设置为正在操作的对象,因此在本例中设置上下文实际上是不必要的。这就足够了:
.hover( menuHoverIn, menuHoverOut );
这里有一个问题。您的问题很模糊,但我想我明白您的意思了:您只希望能够将可重用的悬停函数传递到元素或集合中 在给出解决方案之前,我必须纠正一点:JavaScript不是一种传递值语言,至少不是一直都是这样。JavaScript通过引用传递引用类型(对象),原子类型(字符串、数字、布尔值)通过值传递(除非它们包装在关联的对象类型中) 另外,在我继续之前,我想提供一些关于如何更好地写一些问题的建议(这些问题更有可能得到回答)。首先,试着把你的问题归结为简单易懂的问题。在这种情况下,没有人关心(或想看到)你的漫长道路。你可以用圆圈代替它们,你会有一个更容易阅读的问题。其次,提供重现问题所需的所有信息。并不是每个人都会知道设置Raphael对象所涉及的细节,等等。最好提供一个(对于Raphael这样的库来说可能很棘手,因为它可能没有CDN——但我能够在CDN上找到Raphael的副本)。尝试遵循JavaScript惯例;这将减少试图回答你问题的人之间的困惑。在您的例子中,您调用对象
服务
,这不仅对问题的读者来说是不透明的,而且JavaScript中大写的变量通常是为对象构造函数保留的
好的,接下来是解决方案:
如果查看,您会看到.hover()
包含两个函数,然后是两个上下文对象。这意味着JavaScript使用call
或apply
调用函数,设置函数的上下文(即this
变量),就好像它们是方法调用一样。所以,你想要的是这样的:
var paper = Raphael( 0, 0, 200, 200 ); // create Raphael surface
// re-usable hover functions:
function menuHoverIn(){
// note the use of 'this'; we are animating the 'this' object,
// as if this were a method on an object. JavaScript is very
// flexible this way, and this method can (and will) be called
// as if it were a method of the element you're trying to animate
this.animate({'fill': '#128A8F'}, 500);
};
function menuHoverOut(){
this.animate({'fill': '#010101'}, 500);
};
var set = paper.set(); // create Raphael set; renamed from "Services" in OP
set.push( paper.circle( 50, 50, 25, 25 ) ) // put a circle in the set
.attr({ // set attributes of all elements in set
fill: '#010101',
stroke: '#000',
'stroke-width': 0
})
// provide .hover function for entire set; notice how we pass in set itself
// as the hover in and out context (which will become the 'this' value)
.hover( menuHoverIn, menuHoverOut, set, set );
事实证明,Raphael在默认情况下将上下文设置为正在操作的对象,因此在本例中设置上下文实际上是不必要的。这就足够了:
.hover( menuHoverIn, menuHoverOut );
这里有一个。如果我想制作一个不同于悬停目标的动画,我将如何应用此功能?Mootools有一个函数绑定。但我不认为这是真正的支持了。。。我建议使用jQuery。@PierreFourgeaud,您最初的示例将
target
作为参数传入,这将不起作用(R不是这样的)