1

テキストが連続して移動するシンプルなニュース速報バーを作成しようとしています。テキストの単一の文字列が永遠に移動してループし、ホバー時にのみ停止します。そのようなスクリプトを知っていますか？いろいろ探しましたが見つかりませんでした。

乾杯

これまでのところ、私はこれを持っています:

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

今、私はそれを自動化し、無限にループさせたいと思っています。何か助けはありますか？

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 に答える