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

我有一些关于HTML中字幕的查询
1.首先，我创建了一个简单的字幕，可以向上观看电影
2.在列表中输入字幕内容。
3.每个列表在开始位置应停止1秒

有没有办法解决这个问题

---

这是您需要澄清的图片，请查看以下链接

---

它是jQuery的一个简单插件。您要查找的内容可以通过修改配置来完成。

我使用过div，因为marquee不是跨浏览器的

我还添加了

，以表明即使在上面有一些东西，它仍然可以工作

弯腰代码：在凝视位置，每个列表应停止1秒

工作演示

html js 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");
});

$（函数（）{
var txt=$（“#mytext”）；
bind（'scroll'，函数（）{
var el=$（本）；
//滚动状态机
var scrollState=el.data（“scrollState”）| | 0；
el.数据（“滚动状态”，（滚动状态+1）%4）；
开关（滚动状态）{
案例0：
//初始等待
el.css({
排名：0
});
el.show（）；
setTimeout（函数（）{
el.触发器（“滚动”）；
}, 1000);
打破
案例1：
//开始滚动
var delta=0-parseInt（el.height（））；
if（δ<0）{
动画片({
顶部：三角洲
}，2000，“线性”，函数（）{
el.触发器（“滚动”）；
});
delta=-1*parseInt（delta）+'px'；
动画片({
顶部：三角洲
}，0，“线性”，函数（）{
el.触发器（“滚动”）；
});
动画片({
排名：0
}，2000，“线性”，函数（）{
el.触发器（“滚动”）；
});
}
打破
}
}).触发（“滚动”）；
});

此解决方案的确切正确答案由李斯特先生给出，请参见获得解决方案的注释
这个问题的答案如下

这是工作代码

HTML

李斯特先生

---

非常感谢您的快速回复，这正是我所需要的。。再次感谢

你能在这里发布你的代码吗？请澄清哪些有效，哪些无效。您能发布代码说明哪些已经有效（JSFIDLE）以及哪些应该更改吗？这是链接。。我只需要在起始位置停止选框一段时间。@dreamweiver链接只是选框。。jsfiddle.net/4xMCv。。我只需要JS停在起始位置。首先扔掉字幕，在CSS中为列表添加一个

转换。然后，使用JS将顶部边距设置为小于其当前值的值。等待过渡结束。重复“字幕不是跨浏览器”？你用的是什么浏览器？除此之外，你的解决方案很好，但我认为这不是OP想要的。“每个LI应该在这里停留1秒钟…”我这样做是为了显示新闻，每个新闻都应该向上移动，需要在特定位置暂停1~2秒钟，然后再次恢复，下一条新闻也应该如此@李斯特罗先生。。。那不是你首先说的。我做了，在继续之前，它确实会在每个列表项上停止，但显然这也不是您所需要的。请检查这个
元素是一个非标准元素。@MrLister我使用最新的浏览器，但事实是旧的浏览器不支持marquee，并且该元素是一个非标准元素。
#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;
}

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);
}

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

#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;
}

$(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");
});

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

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);
}

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