javascript - 在起始位置停止或暂停选取框

Question

我有一些与 HTML 中的跑马灯相关的查询
1.首先，我创建了一个 Simply Marquee 电影在向上的方向
2.在列表中输入跑马灯内容。
3.每个列表应该在凝视位置停止1秒

有什么办法可以解决这个问题

这是供您说明的图片

Answer 1

我曾使用过 div，因为选取框不能跨浏览器。

我还添加了 <div id="cont"></div>以表明即使有东西在上面它仍然可以工作。

弯腰的代码每个列表都应该在凝视位置停止 1 秒

工作演示 http://jsfiddle.net/4yYsu/2/

html

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

CSS

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

txt = $("#mytext");
length = $("#mytext li").length;
height_ul = parseInt(txt.height());
height_li = parseInt(txt.height()) / length;
delta = 0;
run();

function run() {
    delta = (delta - height_li < -1 * height_ul) ? height_ul : delta - height_li;
    if (delta <= 0) {
        scroll_li(delta);
    } else if (delta = height_ul) {
        txt.animate({
            top: delta
        }, 0, "linear");
        delta = 0;
        scroll_li(delta);
    }
    setTimeout(run, 1000);
}

function scroll_li(delta) {
    txt.animate({
        top: delta
    }, 2000, "linear").delay(1000);
}

上一个代码

工作演示 http://jsfiddle.net/cse_tushar/4yYsu/

HTML

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

CSS

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

$(function () {
    var txt = $("#mytext");
    txt.bind('scroll', function () {
        var el = $(this);
        // Scroll state machine
        var scrollState = el.data("scrollState") || 0;
        el.data("scrollState", (scrollState + 1) % 4);
        switch (scrollState) {
            case 0:
                // initial wait
                el.css({
                    top: 0
                });
                el.show();
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 1000);
                break;
            case 1:
                // start scroll
                var delta = 0 - parseInt(el.height());
                if (delta < 0) {
                    el.animate({
                        top: delta
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                    delta = -1 * parseInt(delta) + 'px';
                    el.animate({
                        top: delta
                    }, 0, "linear", function () {
                        el.trigger("scroll");
                    });
                    el.animate({
                        top: 0
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                }
                break;
        }
    }).trigger("scroll");
});