停止選取框每10秒鐘5秒

我想創建一個首先開始的選取框，但每隔10秒，選取框將在選取框再次開始之前停止5秒。停止選取框每10秒鐘5秒

我該怎麼做？

我只是設法創建一個計時器，5秒鐘後停止滾動字幕：

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

來源

2012-11-20 Chin

由於每個瀏覽器（它不是標準元素）中的選取框會有所不同，因此您可能需要查找而不是[jQuery替代品]（http://remysharp.com/demo/marquee.html）。 –

你需要一些邏輯來實現它，我試圖提出，你可以檢查。您還需要將' startloop（）;「>'更改爲' startLoop（）;」>' – Sami

前幾天，我需要類似於您的問題的東西。我很快意識到，選取框不是一個標準元素，所以你不能在跨瀏覽器的解決方案中使用它。

我已經提取的動畫部分，基於jQuery，我在我的解決方案中使用，你可以看到在這個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"); 
});

它不會做exaclty與您的要求，但如果你讀的代碼，並進行一些更改，狀態機，你會得到它的工作:)

來源

2012-11-20 07:46:52

這是使用JQuery嗎？目前我對JQuery一無所知，但感謝你的回覆，我會盡力去學習它。 – Chin

是的。有幾個你應該知道的jQuery符號。 f.e .:執行代碼onload：'$（function（）{//將運行onload}）;'，並通過CSS規則選擇元素：'$（「＃mytext」）'選擇id爲「mytext」的元素。 –

如果你想繼續使用字幕，這應該工作（在支持滾動字幕瀏覽器）：

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

這將使得字幕開始運行，停止10秒後，5後再次啓動，並重復。

來源

2012-11-20 07:57:43 Cerbrus

這也是我想到的一個竅門，我會嘗試改進代碼以使其看起來更好，更好。 – Chin

試試這個：

var myMarquee = document.getElementById('myMarquee'); 
run(); 
function run() { 
    setTimeout(function() { 
     myMarquee.stop(); 
     setTimeout(function(){ 
      myMarquee.start(); 
      run();  
     },5000); 
    },10000); 
}

看到它http://jsfiddle.net/gjwYh/

來源

2012-11-20 07:59:47

感謝您的回覆。我認爲我在嵌套函數中不太好，但是你的代碼行數肯定會減少。 – Chin

運行要實現every 10 seconds, the marquee will stop for 5 seconds before the marquee start again你需要這樣一些邏輯。我使用了step變量來控制進度。希望其清晰

<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。我還在div中添加了一個計時器，它可以讓您輕鬆檢查停止行爲並開始計時

來源

2012-11-20 08:48:47 Sami

停止選取框每10秒鐘5秒

回答

相關問題