Question

我正在尝试在HTML5中模拟视频游戏HUD。我有一个CSS样式的div，使它看起来像游戏覆盖，当点击导航链接时，我需要div来自 display：none 状态，然后快速闪烁两次，然后淡出

此外，当单击div中的关闭按钮时，除了最后的淡入淡出从100％反转到0％之外，应该发生同样的情况。

我必须为其他导航链接和不同的div做同样的事情。如果我可以让一个人工作，我应该能够让其他人工作。

所以div的透明度是这样的：

点击之前

关闭状态0％
单击时为100％关0％
在100％上关0％
然后
淡入1.5秒0％至100％

导航链接：

<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的东西都太慢了。

Answer 1

您当前的间隔仅闪烁一次显示，因为您将其打开然后再关闭一次。你应该有类似的东西：

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

此外，即使有两次闪光，闪光灯也只持续20秒。显示器刷新率是每秒60次，因此即使浏览器是实时的，它也只会显示三帧。我不了解你，但对我来说，似乎真的快。我会让它显示大约10帧（间隔为100），隐藏10帧，再次显示，再次隐藏，然后淡出。这让闪光持续了大约半秒钟，这仍然很快，但至少可见。你目前的做法，就像你试图引起癫痫发作一样......

javascript，html5模拟视频游戏HUD效果

1 个答案: