Question

我正在尝试使用不断移动的文本创建一个简单的突发新闻栏。单个文本字符串永远移动和循环，仅在悬停时停止。你知道那样的剧本吗？我搜索了很多但找不到一个。

干杯

到目前为止，我有这个：

<script type="text/javascript">
$(function() {
    var ele   = $('#scroll');
    var speed = 25, scroll = 5, scrolling;

    $('#scroll-up').mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollLeft( ele.scrollLeft() - scroll );
            autoPlay: true;
        }, speed);
    });

    $('#scroll-down').mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollLeft( ele.scrollLeft() + scroll );
            autoPlay: true;
        }, speed);
    });

    $('#scroll-up, #scroll-down').bind({
        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});
</script>

现在我想让它自动化，并让它无限循环。有什么帮助吗？

Answer 1

以下是基于您的示例我一起入侵的内容：http://jsfiddle.net/mcknz/jEGex/

它从上到下滚动，然后回到顶部，但使用垂直空间来显示循环的外观。可以让我更加优雅和充满活力。

HTML：

<div id="scroll">
    <br /><br /><br /><br /><br />
    One<br /><br /><br />
    Two<br /><br /><br />
    Three<br /><br /><br />
    Four<br /><br /><br />
    Five<br /><br /><br />
    Six<br /><br /><br />
    Seven<br /><br /><br />
    <br /><br /><br /><br />
</div>         
<br>
scroll top: <span id="scrollTop"/>

JavaScript的：

$(function() {
    var ele = $('#scroll');
    var speed = 35,
        scroll = 1,
        top = 0,
        maxTop = 500,
        scrolling;

    ele.mouseleave(function() {
        scrolling = window.setInterval(function() {
            top = top === maxTop ? 0 : ele.scrollTop() + scroll;
            ele.scrollTop(top);
            $('#scrollTop').text(top);
        }, speed);
    });

    ele.mouseenter(function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
        }
    });

    ele.mouseleave();

});

CSS

#scroll {
    width: 200px;
    height: 100px;
    overflow: hidden;
    padding: 4px;
    border: solid 1px #000;
}

连续文字幻灯片javascript（突发新闻栏）

1 个答案: