0

感谢这篇文章，这是我所做的：

var current = null;
for (var state in fr) {
    (function (st, state) {
        st[0].state = 0;
        st[0].onmouseover = function() {
            st[0].style.cursor = "pointer";
            current && fr[current].animate({fill: "#EAEAEA", stroke: "#d5d5d5"}, 300);
            st.animate({fill: "#EC5505", stroke: "#EC5505"}, 300);
            st.toFront();
            paper.safari();
            document.getElementById(state).style.display = "block";
            current = state;
        };

        st[0].onmouseout = function () {
            if (this.state == 0)
                st.animate({ fill: "#EAEAEA", stroke: "#D5D5D5" }, 500);
            else
                st.animate({ fill: "#EC5505", stroke: "#EC5505" }, 500);
            st.toFront();
            paper.safari();
        };

        st[0].onclick = function () {
            st.animate({ fill: "#EC5505", stroke: "#EC5505" }, 500);
            st.toFront();
            if (this.state == 0) {                        
                this.state = 1;
            }
            else
                this.state = 0;
            paper.safari();
        };
    })(fr[state], state);
}

我有一些问题......当我点击一个区域然后悬停（在悬停时填写#EC5505）这个区域时，该区域会返回#EAEAEA半秒然后返回#EC5505......通常，这个单击时应该保持悬停颜色...第二个问题是我只想选择一个区域。所以当我点击第二个区域时，第一个区域必须回到初始状态。

你可以帮帮我吗 ？非常感谢

4

1 回答 1

0

它与您的事件有关...因为当您单击元素时会触发 mouseover 事件...当您离开时 mouseout 事件会触发，因此 click 和 mouseout 中的动画都会被触发...

对于第二个问题，您必须保留最后点击的元素的引用......这样当您点击一个元素时，您会检查

if(element has already been clicked){
   // go back to original state
}

尝试将布尔值附加到 set[0] ...或单击 set[0] 时 ....

`var clickedElement = set[0]`

在 onclick 函数内部

if(clickedElement){
// you already have a clicked element so restore its state
}
于 2012-08-11T00:31:13.333 回答