Question

我的客户要求我在他的网页上创建闪烁的消息。我建议反对它，因为它相当俗气，但他支付账单，他想要它，所以我在这里......

我以为我只是创建一个消息列表并编写一些JQuery以使它们一直闪存但是下面的代码存在问题，我急着尝试递归过多而浏览器会阻止它

<div id="bannerflash">
    <ul>
        <li id="f1">Message 1</li>
        <li id="f2">Message 2</li>
        <li id="f3">Message 3</li>
        <li id="f4">Message 4</li>
        <li id="f5">Message 5</li>
    </ul>
</div>
<script>
    $("document).ready(function() {
        $("#bannerflash ul li).hide();
        flash_banner();
    });

    function flash_banner() {
        $("#bannerflash ul li#f1").show();
        $("#bannerflash ul li#f1").delay(3000).hide();
        $("#bannerflash ul li#f2").show();
        $("#bannerflash ul li#f2").delay(3000).hide();
        $("#bannerflash ul li#f3").show();
        $("#bannerflash ul li#f3").delay(3000).hide();
        $("#bannerflash ul li#f4").show();
        $("#bannerflash ul li#f4").delay(3000).hide();
        $("#bannerflash ul li#f5").show();
        $("#bannerflash ul li#f5").delay(3000).hide();
        flash_banner();
    };
</script>

是的，这很难看，现在我想到了它，真的很愚蠢，但我能想到的每一个概念都会导致同样的递归问题。

如何在网页上动态闪烁消息 - 智能方式（如果存在）？

提前致谢！

Answer 1

您可以单独使用CSS，而无需任何JS代码。您可以定义关键帧，然后将该类应用于所需的元素：

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blink {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

<div id="bannerflash">
    <ul>
        <li id="f1" class="blink">Message 1</li>
        <li id="f2" class="blink">Message 2</li>
        <li id="f3" class="blink">Message 3</li>
        <li id="f4" class="blink">Message 4</li>
        <li id="f5" class="blink">Message 5</li>
    </ul>
</div>

您也可以将blink类放在ul上以获得相同的效果，但是我将其保留在li上，因为您的原始JS代码直接影响了该元素

Answer 2

使用cudaMemcpyToSymbol

setInterval(function, delay)

这会每三秒钟反复拨打$("document).ready(function() { $("#bannerflash ul li").hide(); setInterval(flash_banner, 3000); }); function flash_banner() { $("#bannerflash ul li").show(); $("#bannerflash ul li").delay(3000).hide(); ... } ...

使用jquery在网页上连续闪烁消息

2 个答案: