Geek Answers Handbook

How to rotate a div using Raphael.js?

I'm completely new to Raphael and really stuck, I would like to rotate the div and its contents using the button with Raphael.

Ideally, I would like to have a smooth animation that changes from 0 degrees to -90 degrees when the button is pressed, and then when the button is pressed again, the animation will be canceled. I think that I will change the id or class with a click of the mouse so that I can use the same button for both animations. Would it be reasonable?

I really need help, my sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit

Thanks so much for any help.

+5
source share
3

!

, , .

Divs "" , .

, divs, ( ) Raphael.

, , "" .

var bcontrols = new Array();
var yheight = 300;

for (var i = 0; i < 3; i++) {
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
        fill: "r(.5,.9)#39c-#036",
        stroke: "none"
    });

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
        fill: "r(.5,.1)#ccc-#ccc",
        stroke: "none",
        opacity: 0
    });

    bcontrols[i].index = i;
    bcontrols[i].shine.index = i;

    bcontrols[i].shine.mouseover(function (e) {
        this.insertBefore(bcontrols[this.index]);
    });

    bcontrols[i].mouseout(function () {
        this.insertBefore(bcontrols[this.index].shine);
    });

    /* Called from Raphael buttons */
    bcontrols[i].click(function () {
        alert("Hello you just clicked " + this.index);

    });
}

:

var s = paper.set();

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));

s.animate({rotation: "360 65 25"}, 2000);

"" .

, ( ):

http://www.irunmywebsite.com/raphael/raphaelsource.html

, :

http://raphaeljs.com/playground.html

, ...

+7

, div Raphael. Rothael rotate Raphael, div (, , ) Raphael HTML, , , .

+2

div CSS IE. , SVG, , , , , . JQuery , , .

+2

More articles:


All Articles