在起始位置停止或暂停选框

Question

我在HTML中有一些与Marquee相关的查询 1.首先，我创建了一个简单的选框，可以在方向向上进行电影制作 2.Marquee内容输入列表。
3.每个清单应在起始位置停止1秒

有没有办法解决这个问题

以下是您的澄清图片

Answer 1

我使用div作为marquee不是跨浏览器。

我还添加了<div id="cont"></div>来表明，即使有最重要的东西，它仍然有效。

stooping代码每个列表应该在Staring Position停止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");
});

Answer 2

请查看以下链接

https://github.com/aamirafridi/jQuery.Marquee

它是一个简单的jQuery插件。您正在寻找的是修改配置。

Answer 3

对于此解决方案的确切正确答案由 Lister先生给出评论以获得解决方案
该问题的解决方案如下。

这是工作代码..

HTML 的

<div class="container">
   <ul>
      <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>

JavaScript：

var top = 8; run();

function run()
{
    var ul = document.getElementsByTagName('ul')[0];
    var time = 2000;
    if (top<-4) {
        top = 8; 
        ul.style.transition = 'none';
        time = 100;
    }
    else if (top>0) {
        top = 0; 
        ul.style.transition = 'all 4s linear';
        time = 5000;
    }
    else {
        top -= 2;
        ul.style.transition = 'all 1s linear';
    }
    ul.style.marginTop = ''+top+'em';
    setTimeout(run, time);
}

CSS：

.container {height:8em; overflow:hidden}
ul {margin-top:8em;}
li {white-space:nowrap; line-height:2; margin-top:0;}

利斯特先生 非常感谢快速回复，这正是我所需要的......再次感谢