在构造函数中定义悬停效果
define hover effect in constructor
我想我有一个非常简单的问题。使用Pixijs,我使用相同的构造函数创建多个对象。对于每个对象,我都定义了相同的鼠标悬停效果。如何简化呢?
构造函数:function thinarrow(divid,rotation,rendwidth,rendheight,spritewidth,spriteheight){
var that = this;
//renderer & stage
this.rendererstage = new rendererstage("",divid,rendwidth,rendheight)
//Creating Elements
this.arrowblurFilter = new blurfilter(0,0);
this.arrow = new DisplayObjectContainer(spriteheight,spritewidth,true)
this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);
this.rendererstage.stage.addChild(this.arrow);
this.arrow.addChild(this.arrowblur);
this.arrow.addChild(this.arrowimg);
//Animate
this.animate = function(){
that.rendererstage.renderer.render(that.rendererstage.stage);
requestAnimationFrame(that.animate);
}
}
init.js(在body-load上调用)
peoplearrowleft = new thinarrow("peoplearrowleft",Math.PI/2,116,250,125,58);
peoplearrowright = new thinarrow("peoplearrowright",-Math.PI/2,116,250,125,58);
requestAnimationFrame(peoplearrowleft.animate);
requestAnimationFrame(peoplearrowright.animate);
peoplearrowright.arrow.mouseover = function(mouseData){
peoplearrowright.arrowblur.filters = [peoplearrowright.arrowblurFilter.blurfilter];
TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowright.arrow.mouseout = function(mouseData){
TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
peoplearrowright.arrowblur.filters = null;
}});
}
peoplearrowleft.arrow.mouseover = function(mouseData){
peoplearrowleft.arrowblur.filters = [peoplearrowleft.arrowblurFilter.blurfilter];
TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowleft.arrow.mouseout = function(mouseData){
TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
peoplearrowleft.arrowblur.filters = null;
}});
}
我想你可以看到这段代码不是很精简,但我只是不知道如何减少它。我是面向对象的javascript新手。
如果您想以面向对象的方式完成此操作,您可以扩展DisplayObjectContainer来创建一个新的Arrow对象。像这样:
function Arrow(spriteheight, spritewidth) {
PIXI.DisplayObjectContainer.call(this, spriteheight, spritewidth, true);
this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);
this.addChild(this.arrowblur);
this.addChild(this.arrowimg);
this.arrowblurFilter = new BlurFilter(0,0);
this.mouseover = this.onMouseOver;
}
Arrow.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
Arrow.prototype.constructor = Arrow;
// define additional functions after Object.create:
Arrow.prototype.someCustomFunction = function() {
// this.doSomething();
};
Arrow.prototype.onMouseOver = function() {
this.arrowblur.filters = [this.arrowblurFilter];
TweenMax.to(this.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
};
然后像这样使用:
this.arrow = new Arrow(spriteheight,spritewidth);
this.rendererstage.stage.addChild(this.arrow);
相关文章:
- 如何通过悬停或点击谷歌电子表格中的单元格来运行自定义功能
- 悬停时使用Javascript/jQuery淡化自定义SVG的颜色
- 如何添加自定义 CSS3 动画以及悬停时的过渡
- 如何在鼠标悬停和鼠标退出时制作此自定义引导下拉效果
- 在 js 中将鼠标悬停会引发未定义的错误
- 鼠标悬停时 BX滑块停止自定义分页
- 悬停时转换的角度自定义指令显示错误
- 在悬停时获取值会产生“未定义”
- 自定义css单选按钮悬停效果
- 如何定义x轴悬停格式时使用plotly.js
- 高图表-覆盖图例点击和悬停事件自定义逻辑
- 在构造函数中定义悬停效果
- 在哪里定义悬停类/行为来覆盖jquery的主题CSS
- 我的自定义工具提示不会随着我悬停在其上的相应元素移动
- 在angular中创建自定义鼠标悬停,并将$event传递给指令控制器
- 将鼠标悬停到自定义形状.如何
- Google API V3:如果还定义了groundOverlay,则多边形鼠标悬停事件的问题
- 是否可以为凸起按钮添加自定义悬停颜色?
- 不能让鼠标悬停多边形与未捕获的参考错误:谷歌没有定义
- 鼠标悬停时自定义地图/区域