0

I really tried to solve this one. But nothing seems to work.

I'm trying to create a menu on Top of the page which shall only be visible if hovered.

very Simple Element for now:

topViewSurf = new Surface({
    classes: ['topSplash'],
    properties: {
        backgroundColor: 'rgb(170,210,140)',
        boxShadow: '0px 0px 10px rgb(110,150, 90)'
    }
});
topViewMod = new Modifier({
    origin: [0.5, 0],
    size: [this.options.width, 40],
    transform: Transform.translate(0,-35,0)
});
this._add(topViewMod).add(topViewSurf);

then I wanted to call this function, should the Element 'topViewSurf' be hovered: 

function dropTop(){
    topViewMod.setTransform(Transform.translate(0,0,1), 500);
}

For some reason though I can't get hover to work.

I can call the function by: 

topViewSurf.on("click", function(){
    dropTop()
});

Works perfectly fine. But when I replace 'click' with 'hover' nothing happens when I click or hover the element.

I've tried different approaches for this including jQuery and pure js but nothing seems to work (it might be possible that I did mistakes there) but since I'm asking anyway I thought I would ask for a famo.us solution.

Hope you can help me. spitterfly

4

2 回答 2

1

没有“悬停”事件。您应该使用“鼠标悬停”。

topViewSurf.on("mouseover", function(){
    dropTop()
});

希望这可以帮助！

于 2014-05-13T15:32:17.360 回答
0

我对 famo.us 很陌生，我刚刚完成了幻灯片教程。您可以从这里获取基本的源代码（没有悬停）。我还没有检查这个 repo，但它看起来很完整。

在教程之后，我想做一个悬停效果来显示图像是可点击的。我不确定我是否做得对，但以下内容对我有用：

  1. 在文件中单击事件后添加了悬停事件mouseover和背景表面的发射：mouseoutSlideView.js

    background.on('mouseover', function() {
    this._eventOutput.emit('mouseover');
}.bind(this));
background.on('mouseout',   function() {
    this._eventOutput.emit('mouseout');
}.bind(this));

  2. 在我添加到每张幻灯片的SlideShowView.js方法中，以下代码：_createSlides

    slide.on('mouseover', function(data) {
    this.hovered = true;
    this.showHoverEffect(); 
}.bind(this));

slide.on('mouseout', function(data) {
    this.hovered = false;
    this.showHoverEffect(); 
}.bind(this));

  3. 像这样在里面显示悬停效果SlideshowView.js：

    SlideshowView.prototype.showHoverEffect = function() {
    //console.log(this);
    var slide = this.slides[this.currentIndex];
    if ( this.hovered ) slide.hoverFadeIn();
    else slide.hoverFadeOut();
};

  4. 将悬停方法添加到SlideView.js：

    SlideView.prototype.hoverFadeIn = function() {
    this.hoverModifier.setOpacity(1, { duration: 500, curve: 'easeIn' });
};

SlideView.prototype.hoverFadeOut = function() {
    this.hoverModifier.halt();
    this.hoverModifier.setOpacity(0.0, { duration: 500, curve: 'easeIn' });
};

  5. 添加要显示的元素SlideView.js并_createHover()在 SlideView 构造函数中调用：

    function _createHover(){
        var hover = new Surface({
                   // undefined size will inherit size from parent modifier
                properties: {
                    //backgroundColor: '#FFFFF5',
                    zIndex: 3,
                    boxShadow: '20px 20px 20px -5px rgba(0, 0, 255, 0.5)',
                    cursor: 'none',
                    // makes the surface invisible to clicks
                    pointerEvents: 'none'
                }
        });

        var modifierObj = {
            origin: [0.5, 0],
            align: [0.5, 0],
            //transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2),
            opacity: 0.0
        };

        this.hoverModifier = new StateModifier(modifierObj);

        this.mainNode.add(this.hoverModifier).add(hover);
}

我将为此创建一个简单的 jsFiddle，但它还没有准备好。我希望我没有错过任何一部分，但我认为它应该是完整的，也许它可以帮助某人获得悬停效果。

于 2014-12-08T00:25:29.563 回答