Arrêter un rectangle de sélection 5 secondes toutes les 10 secondes

Je veux créer un rectangle de sélection qui commence au début, mais toutes les 10 secondes, le rectangle de sélection s'arrête pendant 5 secondes avant que le rectangle de sélection ne recommence.Arrêter un rectangle de sélection 5 secondes toutes les 10 secondes

Comment puis-je faire cela?

Je ne gèrent que de créer une minuterie qui arrête le chapiteau après 5 secondes:

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

Source

2012-11-20 Chin

car le rectangle de sélection se comportera différemment dans chaque navigateur (ce n'est pas un élément standard), vous pourriez vouloir chercher [jQuery alternative] (http://remysharp.com/demo/marquee.html) à la place. –

Vous avez besoin d'une logique pour l'implémenter, j'ai essayé de présenter, vous pouvez vérifier. De plus, vous devez changer '' en '' – Sami

Il y a quelques jours, je avais besoin quelque chose de similaire à votre problème. J'ai vite compris que le chapiteau n'est pas un élément standard, donc vous ne pouvez pas l'utiliser dans des solutions multi-navigateurs.

J'ai extrait la partie animation, basé sur jQuery, j'ai utilisé dans ma solution, vous pouvez voir l'effet dans ce 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"); 
});

Il ne fait pas la même chose que exaclty vos besoins, mais si vous lisez le code et apporter quelques modifications à l'état de la machine, vous le faire fonctionner :)

Source

2012-11-20 07:46:52

Est-ce que cela utilise JQuery? Actuellement, je n'ai aucune connaissance sur JQuery, mais merci pour votre réponse, je vais essayer de l'apprendre. – Chin

Oui c'est. Il y a quelques notations jQuery que vous devriez connaître. F.e .: exécute le code onload: '$ (function() {// sera exécuté onload});', et sélectionne element par les règles CSS: '$ (" # mytext ")' sélectionne l'élément avec l'identifiant "mytext". –

Si vous voulez de continuer à utiliser le chapiteau, cela devrait fonctionner (dans les navigateurs qui prennent en charge le chapiteau):

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

cela rendra le fonctionnement de démarrage marquee, arrêt au bout de 10 secondes, recommencer après 5 et répéter.

Source

2012-11-20 07:57:43 Cerbrus

C'est un truc que j'ai compris aussi, je vais essayer d'améliorer le code pour qu'il soit plus beau et meilleur. – Chin

essayez ceci:

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

voir courir à http://jsfiddle.net/gjwYh/

Source

2012-11-20 07:59:47

Merci pour la réponse. Je pense que je ne suis pas très bon dans la fonction imbriquée, mais le vôtre est certainement réduire le nombre de ligne de code. – Chin

Pour mettre en œuvre every 10 seconds, the marquee will stop for 5 seconds before the marquee start again Vous avez besoin d'une logique similaire. J'ai utilisé la variable d'étape pour contrôler la progression. Espérons que ce soit clair

<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. J'ai également ajouté une minuterie dans un div qui vous donnera la facilité de vérifier le comportement de stop et de commencer contre le temps

Source

2012-11-20 08:48:47 Sami

Arrêter un rectangle de sélection 5 secondes toutes les 10 secondes

Répondre

Questions connexes