时间戳

首页 > 解决方案 > PHP MySQL HTML 新贴纸

php - PHP MySQL HTML 新贴纸

问题描述

我有以下问题，我现在不知道如何解决这个问题。

这是我当前的代码

<?php   
    $connect = mysqli_connect("localhost", "root", "", "mkeey");  
    $sql = "SELECT * FROM tbl_news ORDER BY id LIMIT 5";  
    $result = mysqli_query($connect, $sql);  
?>  
<html>  
<head>    
    <meta charset="utf-8">  
    <title>Newsticker Test</title>   
    <link href="content/css/test.css" rel="stylesheet" />  
</head>  
    <body>   
        <div class="marquee">
            <div>
                <?php  
                    if(mysqli_num_rows($result) > 0)  
                    {  
                        while($row = mysqli_fetch_array($result))  
                        {  
                            $title = $row['news_title'];
                            $message = $row['news_text'];
                            echo '<span><b>['.$title.']</b> : '.$message.'</span>';
                        }  

                    }  
                ?>
            </div> 
        </div>
    </body>  
</html>

CSS


body { margin: 20px; }

.marquee {
  height: 55px;
  width: 50%;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

下面的问题，当我做整个事情的时候，变量在边界的末端不断被覆盖。这意味着 News1 仅可见，然后 News2 在最左侧短暂可见。我该如何解决这个问题？

因此，任何可以提供帮助的人都会很好，谢谢。

标签： phpmysqlmarqueenews-ticker

解决方案

你echo在循环之外。这就是为什么只打印最后一个条目的原因。将其echo放入循环中，它将解决问题。

<?php  
if(mysqli_num_rows($result) > 0)  
{  
    while($row = mysqli_fetch_array($result))  
    {  
    $title = $row['news_title'];
    $message = $row['news_text'];
    echo '<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"><b>['.$title.']</b> : '.$message.'</marquee>';
    }  
}  
?>

注意：我不想<marquee>因为不标准而大发雷霆。请注意这一点。请考虑使用标准 HTML 元素或它们的组合：a, p, div, ... 请注意，您可以使用纯标准 HTML 和 CSS 创建选取框效果。只需搜索“css only marquee”。

推荐阅读