PHP MySQL HTML 新贴纸答案

【问题标题】：PHP MySQL HTML NewstickerPHP MySQL HTML 新贴纸
【发布时间】：2020-07-17 14:04:47
【问题描述】：

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

这是我当前的代码

<?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 在最左侧短暂可见。我该如何解决这个问题？

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

【问题讨论】：

旁注：<marquee> 已过时且已弃用。
感谢您的回答。如果您有更好的解决方案，我很乐意学习新知识。时髦
您是否有一些 CSS 可以使您的 <p> 标记内联呈现？如果你想让标题和文本在同一行，你需要删除<br>（唯一的目的是添加一个换行符）
是的，有一些 CSS 可以让我的
标签内联呈现。
Tickers 解决了一个 UI 问题，即显示信息的空间有限，并且很多人共享显示，因此无法交互。在网络上，您没有这些限制。人们可以按照自己的节奏滚动。 Web 上不存在缺点（对于给定用户而言，滚动速度太快或太慢，以及等待开始的问题）。因此，票证对于 WWW 来说是一个糟糕的 UI 选择。不要这样做。

标签： php mysql marquee news-ticker

【解决方案1】：

您的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”即可。

【讨论】：