1

I'm trying to create a simple breaking news bar with continuously moving text. A single string of text moving and looping forever, and only stopping on hover. Do you know of any script like that? I've searched a lot but couldn't find one.

Cheers

So far I have this:

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

Now I want to make it automatic, and make it loop infinitely. Any help?

4

1 回答 1

0

这是我根据您的示例一起破解的内容：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;
}​
于 2012-12-05T05:10:58.510 回答