如何停止字幕文本一段时间然后继续?

时间:2015-04-02 04:42:00

标签: javascript jquery html html5 marquee

我希望每个<li>结束选框停止几秒钟,然后继续下一个<li>。这是我的代码:

<div id="teks_container" >
    <marquee direction="up" scrollamount="3"  height="200px">
	<ul>
	   <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	    </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
       </ul>
    </marquee>
</div>

4 个答案:

答案 0 :(得分:1)

您可以使用this.start()this.stop()来暂停和启动marquee

&#13;
&#13;
var start = true;
setInterval(passStartMarquee, 1500 );
// adjust the delay

function passStartMarquee() {
    if (start) {
      document.querySelector('marquee').start();
      start = false;
     } else {
       document.querySelector('marquee').stop();
       start = true;
     }     
}
&#13;
<div id="teks_container" >
    <marquee direction="up" scrollamount="3"  height="200px">
	<ul>
	   <li ><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	    </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks
	   </p></li><br/>
       </ul>
    </marquee>
</div>
&#13;
&#13;
&#13;

我更喜欢使用jquery marquee滑块。因为它将与浏览器兼容。

答案 1 :(得分:0)

建议不要使用非标准html标记,因为它的实现会有所不同,可能无法在其他浏览器中实现 从mozilla开发人员https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

中读取此内容

为了更好的替代使用jquery marquee插件google它,你会发现很多只是选择你认为最合适的那个并使用并停止使用marquee标签

答案 2 :(得分:0)

如果桌面是您唯一支持的平台,那么您可以自信地继续使用marque。 Marque有两个js处理程序stopstart您可以使用它来控制它。

答案 3 :(得分:0)

如果我理解了你想要的内容,只需添加以下CSS,因此每个li将单独显示,并且由于受限marquee的高度,它们之间会有一点延迟:

p {
  height: 250px;
}
<div id="teks_container" >
    <marquee direction="up" scrollamount="3"  height="200px">
	<ul>
	   <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks [1]
	    </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks [2]
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks [3]
	   </p></li><br/>
           <li><strong><p align="justify">
	        I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks [4]
	   </p></li><br/>
       </ul>
    </marquee>
</div>