web-dev-qa-db-ja.com

<Marquee>タグを置き換えるJavascriptMarquee

私はJavascriptに絶望的です。これは私が持っているものです：

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

左にスクロールしますが、比較的シームレスに繰り返す必要があります。現時点では、最初に戻ります。私がそれをした方法は不可能かもしれません、そうでなければ、誰かがより良い方法を持っていますか？

javascripthtmlmarquee
12
blork

多くの機能を備えたjQueryプラグインは次のとおりです。

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

そしてこれは「シルキースムース」です

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

16
GeekyMonkey

シンプルなJavaScriptソリューション：

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

8
Stano

最近、Cycle 2 Jqueryプラグインを使用してHTMLでマーキーを実装しました： 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

マーキータグを置き換えるために使用されたこのスクリプト

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

参照 ここのデモ

1
M. Lak

HTML5はタグをサポートしていませんが、多くのブラウザはテキストを「適切に」表示しますが、コードは検証されません。これが問題ではない場合、それはオプションである可能性があります。

CSS3には、おそらくマーキーテキストを含める機能がありますが、その方法を知っている人は誰でも、CSSにとって「悪い考え」だと信じているため、オンラインで見つけた情報は非常に限られています。 W3ドキュメントでさえ、愛好家や自習者がそれを実装するのに十分な詳細にはなりません。

PHPとPerlも効果を複製できます。これに必要なスクリプトは非常に複雑で、他のどのオプションよりも多くのリソースを消費します。一部のブラウザではスクリプトの実行が速すぎて、効果が完全に無効になる可能性もあります。

JavaScriptに戻ります-あなたのコード（OP）は、私が見つけた中で最もクリーンで、最も単純で、最も効果的なもののようです。これをやってみます。シームレスにするために、おそらくwhileループ（または同様の）を実行し、実際に2つのスクリプトを実行して、一方をもう一方の処理中に休ませて、終了と開始の間の空白を制限する方法を検討します。

単一の機能を変更して空白をなくす方法もあるかもしれません。私はJSを初めて使用するので、頭のてっぺんからわからない。 -私はこれが完全な答えではないことを知っていますが、他の誰かにとってはアイデアが結果をもたらすことがあります。

1
AeSix

@StanoコードといくつかのjQueryを使用して、古いMarqueeタグを標準のdivに置き換えるスクリプトを作成しました。このコードは、Marquee、direction、scrolldelayなどのscrollamount属性も解析します。

コードは次のとおりです。

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 ();
});

そして、これが機能しています codepen

0
Ale