0

这会从文本文件中获取文本并显示它，每五秒刷新一次。我希望文本在屏幕公告横幅样式中滚动。选框只是一个占位符，我该怎么做呢？

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Raffle Winers</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.marquee.js"></script>
<style type="text/css">
            body {
          margin: 10px;
          font-family: 'Lato', sans-serif;
        }
        small {
            font-size: 14px;
        }
        h1 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            text-align: center;
        }

        h2 {
            border-bottom: 1px dotted #ccc;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .marquee, .marquee-with-options {
          width: 300px;
          overflow: hidden;
          border:1px solid #ccc;
        }
    </style>
    <script>
        $(function(){
            var $mwo = $('.marquee-with-options');
            $('.marquee').marquee();
            $('.marquee-with-options').marquee({
                //speed in milliseconds of the marquee
                speed: 5000,
                //gap in pixels between the tickers
                gap: 50,
                //gap in pixels between the tickers
                delayBeforeStart: 0,
                //'left' or 'right'
                direction: 'left',
                //true or false - should the marquee be duplicated to show an effect of continues flow
                duplicated: true,
                //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
                pauseOnHover: true
            });

            //pause and resume links
            $('.pause').click(function(e){
                e.preventDefault();
                $mwo.trigger('pause');
            });
            $('.resume').click(function(e){
                e.preventDefault();
                $mwo.trigger('resume');
            });
            //toggle
            $('.toggle').hover(function(e){
                $mwo.trigger('pause');
            },function(){
                $mwo.trigger('resume');
            })
            .click(function(e){
                e.preventDefault();
            })
        });
    </script>

</head>
<body>

<script type="text/javascript">
        setInterval(read,100);
    function read(){
    jQuery.get('rafflewinners.txt',function(data){$('#container').html(data);});
}
</script>

<div id="container"></div>


<div id="container" data-speed="2000" data-gap="30" data-direction="right" class='marquee'>#container</div>

</body>
4

1 回答 1

2

如果在初始化后更改了 DIV 的内容，marquee 插件将停止工作。您必须再次启动它。

function read(){
    jQuery.get('rafflewinners.txt',function(data){
        $('#container').html(data).marquee();
    });
}

看到这个小提琴

于 2013-03-07T06:12:32.730 回答