javascript – 如何在循环中垂直滚动div内容,如php页面中的新闻源

我现在正在制作一个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 – 如何在循环中垂直滚动div内容,如php页面中的新闻源 - 代码日志