javascript，html5模擬視頻遊戲HUD效果

我試圖在HTML5中模擬視頻遊戲HUD。我有一個CSS樣式的div，使它看起來像一個遊戲覆蓋，當點擊一個導航鏈接時，我需要div從顯示：無狀態，然後快速閃爍兩次，然後淡入。javascript，html5模擬視頻遊戲HUD效果

此外，當div中的關閉按鈕被點擊時，應該發生同樣的情況，除了最後的淡入從100％反轉爲0％。

我必須對其他導航鏈接和不同的div進行相同的操作。如果我能找到一個工作，我應該可以讓其他人也能工作。

所以div的透明度是這樣的：

斷開狀態被點擊
100％時點擊
關閉0％
100％
關閉0％
0％之前然後
淡入1.5秒0％至100％

Nav鏈接：

<li><a href="#target" id="about">About</a></li>

事業部：

<div id="overlay"> 
<a href="#" class="btn" id="close">X</a> 
    <h3>Overlay</h3> 
    Fusce commodo congue ante, quis venenatis nibh blandit ut. Aenean felis est, dictum eget venenatis ac,vestibulum vel urna. Quisque felis metus, vehicula et semper quis, fermentum a dolor. 
    </div>

我嘗試這樣做，但它並不會導致預期的效果。

$("#target").click(function() { 
    //alert("Handler for .click() called."); 

    // set interval 
    var timeCount=0; 
    setInterval(function() { 


     if(timeCount == 1){ 
     //alert("timeCount"+ timeCount); 
      $('#overlay').toggle(); 
     } 
     if(timeCount == 2){ 
     //alert("timeCount"+ timeCount); 
      $('#overlay').toggle(); 
     } 
     if(timeCount == 3){ 
     //alert("timeCount"+ timeCount); 
      $("#overlay").fadeIn("slow"); 
     } 
     if(timeCount == 4){ 
      //abortTimer(); 
     } 
     timeCount++; 
     }, 50); 
     });

對於setInterval速度，任何低於50的值都會過快地顯示開/關切換。我只看到淡入。

60以上的東西太慢了。

來源

2012-04-26 Livi17

我所試過的所有的東西都是jQuery .toggle（）。這只是打開和關閉。我不知道如何使它閃爍，然後褪色。也許如果有一個計時器執行快速切換，然後淡出？ – Livi17 2012-04-27 00:38:01

您當前的時間間隔僅閃爍顯示一次，因爲您將其打開然後再次關閉一次。你應該有這樣的東西：

if(timeCount < 4) $("#overlay").toggle(); 
else { 
    $("#overlay").fadeIn("slow"); 
    clearInterval(timer); 
}

而且，即使有兩次閃光，閃光燈持續只有一秒鐘20。顯示器的刷新率是每秒60次，所以即使瀏覽器是實時的，它也只會顯示三幀。我不知道你，但對我來說，似乎真的快。我會讓它顯示約10幀（間隔100），隱藏10幀，再次顯示，再次隱藏，然後淡出。這會使閃光持續約半秒鐘，仍然很快，但至少可見。你目前這樣做的方式，就像你試圖導致癲癇發作......

來源

2012-04-27 03:16:20

它應該是非常快的。與界面構建時舊的2advanced網站的脈衝速度類似。 http://v3.2a-archive.com/flashindex.htm 我想看看類似的東西是否可能在html中。 – Livi17 2012-04-27 03:47:08

javascript，html5模擬視頻遊戲HUD效果

回答

相關問題