我现在正在制作一个 Php 网页，希望在右侧有一个小的“新闻”DIV。页面加载后立即自动滚动垂直文本。但是，下面的代码在 php 页面中不起作用。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous">
</script>
<style>
span
{
display:block;
width:350px;
word-wrap:break-word;
}
.display
{
height:200px;
border:none;
overflow: hidden;
padding:5;
}
</style>
</head>
<body onLoad="scroll()" style="background-color: black;">
<!---***************** Php Code Start ************************--->
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
//********************* DB Configuration Code *********************
ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'xxxx');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'MyDb');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
//************** Selection of Data *********************
$select=mysql_query("SELECT * FROM newsfeedtest order by created asc");
$i=1;
//************* Display Data *********************
while($userrow=mysql_fetch_array($select))
{
$id=$userrow['id'];
$usernews=$userrow['news'];
$created=$userrow['created'];
//******** Div Displays Data *******
echo '<div class="display" id="news" style="width:350px; margin-bottom:-20px;">
<!-------------------- News : --------------------------------->
<p style="color:#fff;">
<span style="color: #fff;font-size:17px;">'.$usernews.'</span> </p><br />
</div>';
}
//********************* End of Php Code *********************
?>
<script language="javascript">
i = 0
var speed = 1
function scroll()
{
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) {i = 0}
t1=setTimeout("scroll()",100)
}
</script>
</body>
</html>
此外，是否有可能在鼠标悬停时停止滚动并在鼠标移出时滚动开始继续循环。 我已经尝试搜索正确的代码，但到目前为止没有任何效果。
“我现在很沮丧!”
如有任何帮助，我们将不胜感激!
最佳答案
这是我能想出的最简单的解决方案 - 它将实现您想要的，并且还会调整您定义的 CSS 代码(因此，如果您在 CSS 中更改高度，则不必更改脚本) .
var i = 0;
$(document).ready(function(){
var interval = setInterval(function () {
i += 4; // speed
$('#container').animate({ scrollTop: i }, 1);
if (i >= $('#container').prop('scrollHeight') - $('#container').height()) {
i = 0;
}
}, 100);
});#container {
background-color: #000;
color: #fff;
height: 180px;
overflow: hidden;
padding: 5px 20px;
width: 350px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>请注意，我已将“速度”设置为 4 以便更快地查看结果 - 将其更改为 1 以获得您想要的结果。我还将所有内容都放在正确的位置，这意味着没有内联样式或内联脚本，随着元素的增长，这将更容易在元素中进行维护。
此外，为了将所有内容都包装到可运行的片段中，我省略了 PHP 代码，但生成过程与您在示例中使用的代码基本相同，只是您需要 #container 元素它用于上下文。
关于javascript - 如何像php页面中的新闻提要一样在循环中垂直滚动div内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38222995/