0

这是我完美运行的小提琴http://jsfiddle.net/demo_Ashif/tmQ2H/

//
var rsrGroups = [Dist1,Dist2];

for (var i = 0, len = rsrGroups.length; i <= len; i++) {

    var el = rsrGroups[i];

    el.mouseover(function() {
        this.toFront();
        this.attr({
            cursor: 'pointer',
            fill: '#990000',
            stroke: '#fff',
            'stroke-width': '2'
        });
        this.animate({
            scale: '1.2'
        }, 200);
    });
    el.mouseout(function() {
        this.animate({
            scale: '1.05'
        }, 200);
        this.attr({
            fill: '#003366'
        });
    });
    el.click(function() {
        this.animate({
            fill: 'green'
        }, 200);
    });

}
//

index.html但是我的页面中没有运行相同的代码。在 Chrome 和 Firefox 中相同。我不明白这个错误。请有人解决它。

4

1 回答 1

0

您在小提琴中使用的是非常旧的 RaphaelJS 版本——1.5.2。您应该使用 2.1.0，您可能在浏览器中，因此出现错误。

问题在于Dist1andDist2是集合，而不是元素，它们不直接接受事件。但没有必要这样做，因为每组只有一件物品。只需将变量直接分配给path对象：

var Dist1 = rsr.path("m 184.17891,318.14557...")
var Dist2 = rsr.path("m 352.66606,280.9633...")

其他一些错误：

  • to 的论点Raphael被颠倒：应该是var rsr = Raphael('rsr', 0, 0, 612, 792), with xandy然后widthandlength

  • for对于零索引的两项数组，您的循环从索引 2 开始。无论如何，最好使用rsrGroups.forEach(function(el) {...

在 Raphael 2.1.0 中，您不能直接为比例设置动画。简单修复：

this.animate({
    transform: "s1.2"
}, 200);

这是一个有效的小提琴，但请花点时间看看我做了什么——我注释掉了你的代码在哪里被破坏了。

（如果你打算继续使用它，我写了关于 RaphaelJS 的 O'Reilly 书，并向你保证此​​时的任何版税都可以忽略不计，所以我不会在这里赚钱！）

于 2021-01-03T21:58:26.927 回答