如何在循环中垂直滚动 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 元素作为上下文。

// please add bootstrap.css & jquery.js in the same file folder // 
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body> 
          <div class="container-fluid">
          <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-4" style="min-height:300px">
                 <ul id="marquee-vertical">
               <li style="list-style-type:none">
                 <a href="">Breaking News 1</a>
                 <div class="row">
                    <div class="col-xs-4"><img  src="logo1.png"/></div>
                    <div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                 </div>
               </li>
               <li style="list-style-type:none">
                 <a href="">Breaking News 2</a>
                 <div class="row">
                    <div class="col-xs-4"><img src="logo1.png"/></div>
                    <div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                  </div>
               </li>
               <li style="list-style-type:none">
                 <a href="">Breaking News 3</a>
                 <div class="row">
                    <div class="col-xs-4"><img src="logo1.png"/></div>
                    <div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                 </div>
               </li>
               <li style="list-style-type:none">
                <a href="" >Breaking News 4</a>
                <div class="row">
                    <div class="col-xs-4"><img src="logo1.png"/></div>
                    <div class="col-xs-8">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                 </div>
               </li>
             </ul>
            </div>
            <div class="col-xs-4"></div>
          </div>
          </div>
<script type="text/javascript">

(function($, window, document, undefined){
    var pluginName = "marquee",
    defaults = {
       enable : true, 
       direction: 'vertical',   
       itemSelecter : 'li',  
       delay: 1000, 
       speed: 1,  
       timing: 1,
       mouse: true 
    };

    function Widget(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.$element = $(this.element);
        this.$wrapper = this.$element.parent();
        this.$items = this.$element.children(this.settings.itemSelecter);

        this.next = 0;
        this.timeoutHandle;
        this.intervalHandle
        if(!this.settings.enable)return;
        this.init();
    }

    Widget.prototype = {
       init:function(){
            var that = this;
            var totalSize = 0;
            $.each(this.$items, function(index, element){
                totalSize += that.isHorizontal() 
                            ? parseInt($(element).outerWidth())
                            : parseInt($(element).outerHeight());
            }); 
            var elmentTotalSize = this.isHorizontal()
               ? this.$element.outerWidth
               : this.$element.outerHeight;
            if(totalSize < elmentTotalSize)return;
            this.$wrapper.css({
                position : 'relative',
                overflow : 'hidden'
            });
            this.$element.css({
                 position : 'absolute',
                 top : 0,
                 left: 0
            });
            this.$element.css(this.isHorizontal() ? 'width' : 'height', '1000%');
            this.cloneAllItems();
            if(this.settings.mouse)
                     this.addHoverEvent(this);
            this.timer(this);

       },

        timer : function(that){
            this.timeoutHandle = setTimeout(function(){that.play(that)}, this.settings.delay);
        },

        play : function(that){

           this.clearTimeout();
            var target = 0;
            for(var i = 0; i <= this.next; i++){
                 target -= this.isHorizontal()
                    ? parseInt($(this.$items.get(this.next)).outerWidth())
                    : parseInt($(this.$items.get(this.next)).outerHeight());

            }
            this.intervalHandle = setInterval(function(){that.animate(target)},this.settings.timing);
        },

        animate : function(target){
            var mark = this.isHorizontal() ? 'left' : 'top';
            var present =  parseInt(this.$element.css(mark));

            if(present > target)
            {
                if(present - this.settings.speed <= target)
                {
                     this.$element.css(mark, target);
                }else
                     this.$element.css(mark, present - this.settings.speed);
            }else{

                this.clearInterval();
                if(this.next + 1 < this.$items.length){
                     this.next++;
                }else{
                    this.next = 0;
                    this.$element.css(mark,0);
                }
                this.timer(this);
            }
        },

        isHorizontal : function(){
            return this.settings.direction == 'horizontal';
        },
        cloneAllItems: function(){
            this.$element.append(this.$items.clone());
        },

        clearTimeout : function(){
            clearTimeout(this.timeoutHandle);
        },
        clearInterval : function(){
            clearInterval(this.intervalHandle);
        },

        addHoverEvent : function(that){
            this.$wrapper
              .mouseenter(function(){
                   that.clearInterval()
                   that.clearTimeout();
              })
              .mouseleave(function(){
                   that.play(that);
              });
        }

    }

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Widget(this, options));
            }
        });
    };
})(jQuery, window, document);

  $(function(){

  $('#marquee-vertical').marquee();  
});
</script>
</body>
</html>

我使用带有一些属性的选框，问题解决了！

  <marquee behavior="scroll" height="50px" scrollamount="1"  direction="up" onmouseover="this.stop();" onmouseout="this.start();">
  <!---*********************** Php Code Start ***************************--->
       <?php
         //********** Php code goes here ***********
       ?>
  <!---******************** Php Code End ********************************--->
   </marquee>

相关内容

最新更新

热门标签：