web-dev-qa-db-fra.com

Javascript Marquee pour remplacer les balises <Marquee>

Je suis sans espoir en Javascript. C'est ce que j'ai

<script type="text/javascript">
    function beginrefresh(){

        //set the id of the target object
        var Marquee = document.getElementById("Marquee_text");

        if(Marquee.scrollLeft >= Marquee.scrollWidth - parseInt(Marquee.style.width)) {
            Marquee.scrollLeft = 0;
        }

        Marquee.scrollLeft += 1;

        // set the delay (ms), bigger delay, slower movement
        setTimeout("beginrefresh()", 10);

    }
</script>

Il défile vers la gauche mais j’ai besoin de le répéter assez facilement. Pour le moment, ça revient juste au début. Ce n'est peut-être pas possible comme je l'ai fait, sinon quelqu'un aurait une meilleure méthode?

javascripthtmlmarquee
12
blork

Voici un plugin jQuery avec beaucoup de fonctionnalités:

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

Et celui-ci est "soyeux"

http://remysharp.com/2008/09/10/the-silky-smooth-Marquee/

16
GeekyMonkey

Solution javascript simple:

window.addEventListener('load', function () {
	function go() {
		i = i < width ? i + step : 1;
		m.style.marginLeft = -i + 'px';
	}
	var i = 0,
		step = 3,
		space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var m = document.getElementById('Marquee');
	var t = m.innerHTML; //text
	m.innerHTML = t + space;
	m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
	var width = (m.clientWidth + 1);
	m.style.position = '';
	m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
	m.addEventListener('mouseenter', function () {
		step = 0;
	}, true);
	m.addEventListener('mouseleave', function () {
		step = 3;
	}, true);
	var x = setInterval(go, 50);
}, true);
#Marquee {
   background:#eee;
   overflow:hidden;
   white-space: nowrap;
 }
<div id="Marquee">
	1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>

JSFiddle

7
Stano

J'ai récemment implémenté un chapiteau en HTML à l'aide du plugin Jquery du cycle 2: http://jquery.malsup.com/cycle2/demo/non-image.php 

<div class="cycle-slideshow"  data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1"  data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" >
  <div>  Text 1  </div>
  <div>  Text 2  </div>
</div>
2
Manikandan

Ce script remplaçait la balise Marquee 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

         $('.scrollingtext').bind('Marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('Marquee');
             });
         }).trigger('Marquee');

     });
     </script>


<div class="scroll">
    <div class="scrollingtext"> Flash message without Marquee tag using javascript!  </div>
 </div>

voir démo ici

1
M. Lak

HTML5 ne prend pas en charge la balise, mais de nombreux navigateurs continueront à afficher le texte "correctement", mais votre code ne sera pas validé. Si ce n'est pas un problème pour vous, cela peut être une option.

CSS3 a la capacité, semble-t-il, d’avoir du texte Marquee. Cependant, comme tout le monde le sait, c’est une "mauvaise idée" pour CSS, les informations que j’ai trouvées en ligne sont très limitées. Même les documents W3 n'entrent pas assez dans les détails pour qu'un amateur ou un autodidacte puisse le mettre en œuvre.

PHP et Perl peuvent également dupliquer l'effet. Le script nécessaire pour cela serait incroyablement compliqué et prendrait beaucoup plus de ressources que toute autre option. Il est également possible que le script s'exécute trop rapidement sur certains navigateurs, ce qui entraîne la suppression complète de l'effet.

Donc, retour à JavaScript - Votre code (OP) semble être le plus propre, le plus simple, le plus efficace que j'ai trouvé. Je vais essayer cela. Pour des raisons de transparence, je chercherai un moyen de limiter l’espace blanc entre la fin et le début, éventuellement en faisant une boucle while (ou similaire) et en exécutant deux du script, en laissant l’un reposer pendant que l’autre est en cours de traitement. 

Il se peut également qu’un seul changement de fonction supprime l’espace blanc. Je suis nouveau à JS, alors je ne le sais pas par cœur. - Je sais que ce n'est pas une réponse complète, mais parfois, les idées peuvent donner des résultats, ne serait-ce que pour quelqu'un d'autre.

1
AeSix

En travaillant avec @Stano et du code jQuery, j'ai créé un script qui remplacera l'ancienne balise Marquee par la variable standard div. Le code analysera également les attributs Marquee tels que direction, scrolldelay et scrollamount.

Voici le code: 

jQuery(function ($) {

    if ($('Marquee').length == 0) {
        return;
    }

    $('Marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-Marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_Marquee() {

        let marqueeElements = document.getElementsByClassName('new-Marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_Marquee ();
});

Et voici un travail codepen

0
Ale