Question

我正在尝试使用简单的连续滚动表来设置滚动记分板。一般的想法是，在一个给定的div中，该表将循环遍历每个团队，其得分向上。

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文件

 <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>

滚动/滚动记分板HTML

1 个答案: