开发者

Raphael and targeting nodes within a Set

I have a set of Raphael Images that are being put at random on the canvas. I would like each of these images to have a rollover but I think I have my syntax wrong :( any ideas?

JSFiddle: http://jsfiddle.net/neuroflux/VS6gT/1/ (Edited to include the libraries)

Code Snippet:

for (var i = 0; i <= a; i++) {
                    var ax = Math.floor(Math.random() * dw) + 1;
                    var ay = Math.floor(Math.random() * dh) + 1;
                    var ao = Math.floor(Math.random() * 10) + 1;
                    var ac = Math.floor(Math.random() * 4) + 1;
                    if (ac == 1) { col = 'earth.gif'; } else 
                    if (ac == 2) { col = 'jupiter.gif'; } else 
                    if (ac == 3) { col = 'neptune.gif'; }
                    var planetName = nameGen();
                    st.push = (
                        planet = r.image(col, ax,ay,ac,ac).attr({
                            'fill':'#fff',
                            'opacity':'0.'+ao,
                            'stroke-width':0,
                            'cursor':'pointer'
                        }).id = planetName
                    );
                }

st.mouseover(function() {
                    if (info) { info.remove(); }
                    this.node.animate({
                        'scale':30
                    }, 250);
                    this.animate({
                        'rotation':999
                    }, 25000);
                    info = r.rect(5,5,200,150).attr({
                        'fill':'#fff',
                        'stroke':'#ff0000'
                    });
                    infoText = r.text(75,2开发者_开发知识库5,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
                        'font-size':14
                    });
                }).mouseout(function() {
                    this.animate({
                        'scale':1
                    }, 250);
                });


It seems like attaching events to the set doesn't work, but you can attach them direct to the planets as you're creating them:

var planet = r.image(col, ax,ay,ac,ac).attr({
        'fill':'#fff',
        'opacity':'0.'+ao,
        'stroke-width':0,
        'cursor':'pointer'
});
planet.id = planetName;
st.push = planet;
planet.mouseover(function() {
    if (info) { info.remove(); }
    this.animate({
        'scale':30
    }, 250);
    this.animate({
        'rotation':999
    }, 25000);
    info = r.rect(5,5,200,150).attr({
        'fill':'#fff',
        'stroke':'#ff0000'
    });
    infoText = r.text(75,25,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
        'font-size':14
    });
}).mouseout(function() {
    this.animate({
        'scale':1
    }, 250);
    });
}

The only other thing I had to change was this.node.animate to this.animate, then it seems to be working.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜