滚动/滚动记分牌HTML

Question

我想要一个简单的连续滚动表来滚动记分牌。总体思路是，在给定的分区内，表格将循环遍历每个队伍，并且他们的得分向上。

marquee html标签与我想要的相似，虽然存在一些问题。首先，许多论坛都反对。其次，即使我使用它，我也需要修复引导第一个条目并跟随最后一个条目的空白空间。

理想情况下，我不想使用JS，但它看起来像我在这一点上的最佳选择。

下面显示了代码的大致轮廓，其中我需要头部保持静态，但表格内容要在底部滚动并与头部一致。我使用了marquee html标签作为占位符来指示滚动应该如何与内容交互。这是jfiddle中的以下粗略代码：here

<div> 
<table><tr> 
    <td>Place</td> 
    <td>Team</td> 
    <td>Points</td> 
    </tr></table> 
<marquee direction="up"> 
    <table><tr> 
     <td>1</td> 
     <td>Team One</td> 
     <td>1000</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Team Two</td> 
     <td>500</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Team Three</td> 
     <td>250</td> 
    </tr></table> 
</marquee> 
</div> 

欢迎您提出任何建议。

Answer 1

嗯，这是vscroller.js文件插件..我已经修改了一下，以满足我的需求

(function ($) { 
    $.fn.extend({ 
     vscroller: function (options) { 
      var settings = $.extend({ speed: 2000, stay: 3000, newsfeed: '', cache: true }, options); 

      return this.each(function() { 
       var interval = null; 
       var mouseIn = false; 
       var totalElements; 
       var isScrolling = false; 
       var h; 
       var t; 
       var wrapper = $(this).addClass('news-wrapper'); 
       if (settings.newsfeed == '') { alert('No XML file specified'); return; } 
       $.ajax({ 
        url: settings.newsfeed, 
        type: 'GET', 
        dataType: 'xml', 
        cache: settings.cache, 
        success: function (xml) { 
         //if there are news headlines then build the html 
         var contentWrapper = $('<div/>').addClass('news-contents-wrapper'); 
         var newsHeader = $('<div/>').addClass('news-header'); 
         var newsContents = $('<div/>').addClass('news-contents'); 
         wrapper.append(contentWrapper); 
         contentWrapper.append(newsHeader); 
         contentWrapper.append(newsContents); 
         newsHeader.html($(xml).find('newslist').attr('title')); 
         var i = 0; 
         totalElements = $(xml).find('news').length; 
          $(xml).find('news').each(function() { 
          var news = $('<div/>').addClass('news'); 
          newsContents.append(news); 
          var description = $('<div/>').addClass('description'); 
          news.append(description); 
          var url = $(this).attr('url'); 
          var htext = $(this).find('headline').text(); 
          description.append($('<span>').html("<img src='home/images/icons/bullet.png' /> <a style='color:#ffffff' href='" + url + "'>" + htext + "</a>")); 
          var newsText = $(this).find('detail').text(); 
          if (newsText.length > 80) { 
           newsText = newsText.substr(0, 80) + "..."; 
          } 
          description.append($('<div/>').addClass('detail').html(newsText)); 
         }); 
         h = parseFloat($('.news:eq(0)').outerHeight()); 
         $('.news', wrapper).each(function() { 
          $(this).css({ top: i++ *20 }); 
         }); 
         t = (totalElements - 1) * h; 
         newsContents.mouseenter(function() { 
          mouseIn = true; 
          if (!isScrolling) { 
           $('.news').stop(true, false); 
           clearTimeout(interval); 
          } 
         }); 
         newsContents.mouseleave(function() { 
          mouseIn = false; 
          interval = setTimeout(scroll, settings.stay); 
         }); 
         interval = setTimeout(scroll, 1); 
        } 
       }); 
       //$.get(settings.newsfeed,); 
       function scroll() { 
        if (!mouseIn && !isScrolling) { 
         isScrolling = true; 
         $('.news:eq(0)').stop(true, false).animate({ top: -50 }, settings.speed, function() { 

          clearTimeout(interval); 
          var current = $('.news:eq(0)').clone(true); 
          current.css({ top: 40 }); 
          $('.news-contents').append(current); 
          $('.news:eq(0)').remove(); 
          isScrolling = false; 
          interval = setTimeout(scroll, settings.stay); 

         }); 
         $('.news:gt(0)').stop(true, false).animate({ top: '-=' + 20 }, settings.speed); 
        } 
       } 


      }); 
     } 
    }); 
})(jQuery); 

相应的CSS文件

.news-wrapper 
{ 

} 
.news-wrapper .news-contents-wrapper 
{ 
    width: 200px; 
    margin: auto; 

    height: 20px; 
} 
.news-wrapper .news-contents 
{ 
    overflow: hidden; 
    position: relative; 
    z-index: 998; 
    height: 200px; 
    right:8px; 
} 
.news-wrapper .news 
{ 
    width: 100%; 
    height: 5px; 
    color: #6a6a6a; 
    position: absolute; 
} 
.news-wrapper .news-header 
{ 
    color: White; 
    height: 20px; 
    font-weight: bold; 
    font-size: 14px; 
    padding-top: 12px; 
    padding-left: 10px; 
    padding-bottom: 20px; 
} 
h1 
{ 
    color: White; 
    font-size: 14px; 
} 
.clear 
{ 
    clear: both; 
} 


.history 
{ 
    padding-top: 14px; 
    float: left; 
    width: 26%; 
    padding-left: 32px; 
} 
.description 
{ 
    float: left; 
    width: 64%; 
    padding: 4px; 
} 
.description .detail 
{ 
    font-size: 12px; 
    overflow: hidden; 
    color:#B1B1B1; 
} 
.elipses, .day, .month 
{ 
    display: block; 
    height: 10px; 
} 
.day, .month 
{ 
    padding-top: 6px; 
} 
h1 a, h1 a:active, h1 a:visited 
{ 
    text-decoration: none; 
    color:White; 
} 
h1 a:hover 
{ 
    text-decoration: underline; 
    color:White; 
} 

与详细信息的XML文件，我滚动

<?xml version="1.0" encoding="utf-8" ?> 

    <newslist title="Quick Links"> 
     <news url="#" date=""> 
     <headline>Details 1</headline> 
     </news> 
     <news url="#" date=""> 
     <headline>Details 1</headline> 
     </news> 

    <news url="#" date=""> 
    <headline>Details 1</headline> 
    </news> 

</newslist> 

我的HTML文件

需要0

<span class="news-wrapper" id="vscroller" style=" background:rgba(1,102,220,0.3);left: 20px;top:8px;position:relative;float: left; top:228px;height:95px;width: 150px; padding:0 2% 0 2%;"> 

      </span> 

终于JS

<script type="text/javascript"> 
     jQuery(document).ready(function() { 
      jQuery('#vscroller').vscroller({ newsfeed: 'home/js/news.xml' }); 
     }); 
    </script>