admin管理员组文章数量:1336632
I want to create an marquee that start at first, but every 10 seconds, the marquee will stop for 5 seconds before the marquee start again.
How can I do that?
I only manage to create a timer that stop the marquee after 5 seconds :
<script>
function startLoop() {
setInterval( "doSomething()", 5000 ); }
function doSomething() {
document.getElementById('myMarquee').stop(); }
</script>
HTML
<body onload="startLoop();">
<marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
I want to create an marquee that start at first, but every 10 seconds, the marquee will stop for 5 seconds before the marquee start again.
How can I do that?
I only manage to create a timer that stop the marquee after 5 seconds :
<script>
function startLoop() {
setInterval( "doSomething()", 5000 ); }
function doSomething() {
document.getElementById('myMarquee').stop(); }
</script>
HTML
<body onload="startLoop();">
<marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
- 3 as marquee will behave different in each browser (it is not a standard element), you might want to look for jQuery alternative instead. – huysentruitw Commented Nov 20, 2012 at 7:31
-
You need some logic to implement it, I have tried to present, you can check. Also you need to change
<body onload="startloop();">to<body onload="startLoop();">– Sami Commented Nov 20, 2012 at 9:03
5 Answers
Reset to default 3A few days ago I needed something similar to your problem. I soon figured out that marquee is not a standard element, so you can't use it in cross-browser solutions.
I have extracted the animation part, based on jQuery, I used in my solution, you can see the effect in this jsFiddle
HTML
<div id="container">
<div id="mytext">
this is a simple text to test custom marquee
</div>
</div>
CSS
#container
{
display: inline-block;
background-color: #cccccc;
width: 100px;
height: 100px;
overflow: hidden;
}
#mytext
{
display: inline-block;
position: relative;
white-space: nowrap;
}
JavaScript
$(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({ left: 0 });
el.show();
window.setTimeout(function () {
el.trigger("scroll");
}, 5000);
break;
case 1: // start scroll
var delta = el.parent().width() - el.width();
if (delta < 0) {
el.animate({ left: delta }, 2000, "linear", function () {
el.trigger("scroll");
});
}
break;
case 2: // delay before fade out
window.setTimeout(function () {
el.trigger("scroll");
}, 2000);
break;
case 3: // fade out
el.fadeOut("slow", function () {
el.trigger("scroll");
});
break;
}
}).trigger("scroll");
});
It doesn't do exaclty the same as your requirement, but if you read the code and make some changes to the state-machine, you will get it working :)
If you want to keep using the marquee, this should work (In browsers that support the marquee):
<script>
function stopRunning() {
document.getElementById('myMarquee').stop();
setInterval("startRunning()", 5000);
}
function startRunning() {
document.getElementById('myMarquee').start();
setInterval("stopRunning()", 10000);
}
//You don't really need a function to start the loop, you can just call startRunning();
startRunning();
</script>
This will make the marquee start running, stop after 10 seconds, start again after 5, and repeat.
try this:
var myMarquee = document.getElementById('myMarquee');
run();
function run() {
setTimeout(function() {
myMarquee.stop();
setTimeout(function(){
myMarquee.start();
run();
},5000);
},10000);
}
see it run at http://jsfiddle/gjwYh/
To implement every 10 seconds, the marquee will stop for 5 seconds before the marquee start again You need some logic like. I have used step variable to control the progress. Hope its clear
<script>
var step = 1; // marquee is run on load time
function startLoop()
{
setInterval("doSomething()", 5000 );
}
function doSomething()
{
if (step == 0) {
// 5 seconds are passed since marquee stopped
document.getElementById('myMarquee').start();
step = 1;
}
else
{
if (step == 1) {
// 5 seconds are passed since marquee started
step = 2; // Just delay of another 5 seconds before stop
}
else
{
if (step == 2) {
// 10 seconds are passed since marquee started
document.getElementById('myMarquee').stop();
step = 0;
}
}
}
}
</script>
Check Out its Working Here on Jsfiddle. I have also added a timer in a div which will give you ease in checking the behavior of stop and start against time
if you want to apply same in angular then you do like this
import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';
write this under class
@ViewChild('myname', {static: false}) myname:ElementRef;
to start the loop write this under ngOnInit
setTimeout(()=>{ //<<<--- using ()=> syntax
this.startRunning()
console.log("aaa")
}, 1000);
place this code outside of ngOnInit
startRunning() {
setInterval(() =>{
this.myname.nativeElement.stop();
setTimeout(() =>{
this.myname.nativeElement.start();
console.log("start")
},2000)
console.log("stop")
}, 4000);
}
本文标签： javascriptStop a marquee 5 seconds for every 10 secondsStack Overflow
版权声明：本文标题：javascript - Stop a marquee 5 seconds for every 10 seconds - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742371340a2462298.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论