Question

拉斐尔/ JS的新手，并玩弄clikcable图像。我正在尝试显示多个图像，并根据单击的图像使其变大，以前点击的图像更短。

我正在使用Raphael.js，代码片段就像这样......

        var loc1 = paper.image("location.png",100, 160, 80, 80);
        var cont1 = paper.image("contacts_1.png", 50,150, 42,42);

        loc1.node.onclick = function() {
                clicked("location");

        }

        cont1.node.onclick = function() {
                clicked("contacts");

        }
        function clicked(img) {
            clicked = img;
            //alert("clicked "+clicked);
            //loc1.scale(.5,.5);
            if(clicked == "location") {
                loc1.animate({width: 80, height: 80}, 1000);
                cont1.animate({width: 42, height: 42}, 1000);

            }
            else if(clicked == "contacts") {
                loc1.animate({width: 42, height: 42}, 1000);
                cont1.animate({width: 80, height: 80}, 1000);


            }
       }

当我添加cont1.node.onlcick时，点击不起作用我做错了什么？它只适用于一个onclick。

Answer 1

我没有太多时间来解释您的代码有什么问题。但我建议您使用框架方法来处理您在其中创建的对象。

在这种特殊情况下，我认为最好使用Raphael的点击方法。

使用代码的示例如下

    var loc1 = paper.image("location.png", 100, 160, 80, 80);
    var cont1 = paper.image("contacts_1.png", 50,150, 42,42);


   loc1.click(function(){
         loc1.animate({width: 80, height: 80}, 1000);
         cont1.animate({width: 42, height: 42}, 1000);
   })

   cont1.click(function(){
            loc1.animate({width: 42, height: 42}, 1000);
            cont1.animate({width: 80, height: 80}, 1000);
   })

这样，您将该函数分配给raphael对象，而您不需要将if与标识符一起使用。

Raphaeljs中的可点击图片

1 个答案: