通过ajax使用滚动文本更新div

问题描述

我有一个div，其中包含我正在使用jquery在页面上水平滚动的文本。滚动文本div的内容是从MysqL 数据库中提取的，并且每2分钟通过ajax更新一次。

我的问题是ajax第一次更新div后，内容仅在页面的左边缘继续加载，并从页面的左侧反弹。您可以通过以下网址查看该问题的演示（请查看页面底部的黑色栏）： https://rb.gy/z7nbne

下面是我的代码：

index.PHP

    <div class="marquee" id="marquee">
      <img src="images/LIVETab.svg" alt="Live Donation Stream Tab" class="livetabimg">
      <div class="marqueecontent">
        <ul id="marqueeitems">
        
        </ul>
      </div>
    </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
<script>
    $('.marqueecontent').marquee({
        //speed in milliseconds of the marquee
        duration: 1000,//gap in pixels between the tickers
        gap: 0,//time in milliseconds before the marquee will start animating
        delayBeforeStart: 0,//'left' or 'right'
        direction: 'left',//true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: true
    });

    $(document).ready(function(){
      setInterval(function(){
        $('.marqueecontent').marquee('destroy')
        $("#marqueeitems").load('donationstream.PHP')
      },2000);
      $('.marqueecontent').marquee()
    });
</script>

donationstream.PHP

$con = MysqLi_connect("localhost","mydbaseuser","123456","dbasename");
// Check connection
if (MysqLi_connect_errno()) 
{
   echo "Failed to connect to MysqL: " . MysqLi_connect_error();
   exit();
}

$sql = MysqLi_query($con,"SELECT dlevel,donername FROM livedonationticker ORDER BY rowid DESC");
while($drow = MysqLi_fetch_array($sql))
{
   extract($drow);
   $donername = stripslashes("$donername");
   $dlevel = stripslashes("$dlevel");
   echo " <li><strong>$dlevel</strong> &#8226; <i>$donername</i></li>";
}

解决方法

您的代码存在多个问题。让我总结一下：

您想每2分钟更新一次数据，但是您的代码当前每2秒更新一次。间隔2分钟为120000。
您正在销毁区间事件处理程序中的选取框，但将其添加回去，这是行不通的
重新配置选取框时，您无需重新设置选项，这意味着新的选取框将使用默认选项

看一下工作演示，为您删除我评论过的生产代码和注释行：

const marqueeOptions = {
  //speed in milliseconds of the marquee
  duration: 5000,//gap in pixels between the tickers
  gap: 0,//time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,//'left' or 'right'
  direction: 'left',//true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
};

function loadMarquee() {
  $("#marqueeitems").load('http://molloycollegegala.com/donationstream.php',{},function() {
    $('.marqueecontent').marquee(marqueeOptions);
  });
}

$(document).ready(function() {
  loadMarquee();
  setInterval(function() {
    console.log("Updating...");
    $('.marqueecontent').marquee('destroy');
    loadMarquee();
  },120000);
});

.marquee {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

ul li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

<div class="marquee" id="marquee">
  <div class="marqueecontent">
    <ul id="marqueeitems"></ul>
  </div>
</div>

ajax jquery marquee marquee