javascript - AJAX 使用 Marquee 重新加载行为不端

问题描述

我正在努力在每次运行后重新加载选框。它工作正常，直到它重新加载。

这是代码：

<?php
<html>
    <head>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
        <style>
            .subclass1 { white-space: nowrap; height: 55px; display: inline-block; padding: 5 10 5 5; }
        </style>
    </head>
    <body>
        <h1>No Reload</h1>
        
        <div class="ticker-main-box scroller1" data-duplicated="true" style="border: 1px #000 solid;">
                <?php echo file_get_contents("simpleData.txt"); ?>
        </div>
        <div style="height: 50px"></div>
        <h1>Supposed to Reload</h1>
        <div class="ticker-main-box scroller2" style="border: 1px #000 solid;">
                <?php echo file_get_contents("simpleData.txt"); ?>
        </div>
        <script type="text/javascript">

            console.log("Load Marquee...");
            jQuery(document).ready(function() {
                
                var tickerSettings = (
                        {direction: 'left'},
                        {speed: 40},
                        {duration: 10000});

                $('.scroller2')
                    .bind('finished', function(){
                        //First, "destroy" the marquee so it's ready for new content
                        $(this).marquee('destroy');
                        //Second, Load new content using Ajax and update the marquee container
                        $(this).html($(this).load('simpleData.txt'))
                            //Reapply the Marquee
                            .marquee(tickerSettings)
                    })
                    .marquee(tickerSettings);
                    
                $('.scroller1').marquee(tickerSettings);

            });
            console.log("Loaded Marquee...");
            
        </script>
    </body>
</html>
?>

测试文件 ( simpleData.txt) 的内容如下所示：

<div class="subclass1">1.  Text that gets rotated</div>
<div class="subclass1">2.  Text that gets rotated</div>
<div class="subclass1">3.  Text that gets rotated</div>
<div class="subclass1">4.  Text that gets rotated</div>

No Reload无休止地滚动（如预期的那样）。Supposed to Reload部分滚动一次然后停止。我已经遵循了这里的模式，但无法让它按预期运行。重新加载后，文本将停止滚动并立即全部显示在容器中。

编辑：

我知道有更好的方法来加载文件。加载文件不是问题。当我做这样的事情时，我得到了同样的结果：

$.ajax({url: "simpleData.txt", success: function(tickerData){
                    $(".scroller2").html(tickerData);
                }, error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
                }})
            )

标签： javascriptjqueryajaxreloadmarquee

javascript - AJAX 使用 Marquee 重新加载行为不端

问题描述

解决方案

推荐阅读