1

我正在尝试实现 Raphael 图像旋转演示：

http://raphaeljs.com/image-rotation.html

作为Foundation框架中的一个滑块，但是我不能让它在旋转时不切掉侧面就让它居中，请看这里

http://jcfolio.co.uk/current/index-raphael.html

<script>
    window.onload = function () {

        var src = document.getElementById("bee").src,
            angle = 0;
        document.getElementById("globe-holder").innerHTML = "";
        var R = Raphael("globe-holder", 1000 , 500);
        var img = R.image(src,-535, -150, 2000, 2000);

        var butt1 = R.set(),
            butt2 = R.set();
        butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "none", fill: "#66c100", "fill-opacity": .5 }),
        R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#fff"}),
                   R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0, cursor: "pointer" }));
        butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "none", fill: "#66c100", "fill-opacity": .5 }),
                  R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#fff"}),
                   R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0, cursor: "pointer" }));
        butt1.translate(35, 380);
        butt2.translate(850, 380);
        butt1[2].click(function () {
            angle -= 120;
            img.stop().animate({transform: "r" + angle}, 1000, "backOut");
        }).mouseover(function () {
            butt1[1].animate({fill: "#66c100"}, 300);
        }).mouseout(function () {
            butt1[1].stop().attr({fill: "#fff"});
        });
        butt2[2].click(function () {
            angle += 120;
            img.animate({transform: "r" + angle}, 1000, "backOut");
        }).mouseover(function () {
            butt2[1].animate({fill: "#66c100"}, 300);
        }).mouseout(function () {
            butt2[1].stop().attr({fill: "#fff"});
        });
        // setTimeout(function () {R.safari();});
    };
</script>

当我将地球仪宽度增加到 2000 像素（png 的全宽）时，它不会居中！

认为这可能是我错过的简单事情！非常感谢任何帮助。

詹姆士

4

0 回答 0