如何在JavaScript中創建電源欄

Question

如何創建一個將自動上下切換的電源欄，並在我單擊屏幕時停止。

http://i.stack.imgur.com/L3JSH.jpg

Answer 1

您將需要更具體的瞭解究竟是什麼，你都試過，什麼是不工作的。但是，這應該讓你開始。本示例使用sgv，但可以很容易地將其轉換爲面向方法的更多div。

目標是在圓圈位於中心區域時點擊切換按鈕。祝你好運！

注意：這可能只適用於chrome。

document.getElementById("toggler").addEventListener("click", function(){ 
 
    var el = document.querySelector("circle"); 
 
    var className = "stopped"; 
 

 
    el.classList.toggle(className); 
 

 
    if (!el.classList.contains(className)) { return } 
 

 
    var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx")); 
 

 
    if (currentCX >= 240 && currentCX <= 260) { 
 
    console.log("hit"); 
 
    } else { 
 
    console.log("miss"); 
 
    } 
 
});

@keyframes sweep { 
 
    from { cx: 5; } 
 
    to { cx: 495; } 
 
} 
 

 
circle{ 
 
    animation-duration: 3s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-name: sweep; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 

 
circle.stopped{ 
 
    animation-play-state: paused; 
 
}

<svg id="lineWithDots" width="500px" height="20px"> 
 
    <g transform="translate(0,10)"> 
 
    <rect width="490" height="2" y="-1" x="5" /> 
 
    <rect width="20" height="10" y="-5" x="240" /> 
 
    <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" /> 
 
    </g> 
 
</svg> 
 

 
<div> 
 
    <button id="toggler">toggle</button> 
 
</div>