Question

我正在javascript中构建一个功能，如果一个类应用于一个跨度，它会向左滚动。

Link to the scrolling text code on codepen

            <htm>
            <head>
            <style type="text/css">

            *{margin: 0;padding: 0}

            pre {
              overflow: auto;
            }

            .frmText{
                width: 300px;
                height: 32px;
                overflow: hidden;
            }
            .scrollable{
            white-space: pre;

            }
            </style>
            <script> 

                var tt=setTimeout("",100);

                var scrollable, ele, text, newText, str, id;
                function scrollText(){
                    text = ele.innerHTML;
                    newText = text.substr(0,1);
                    str= text.substr(1,text.length) + newText;
                    ele.innerHTML = str;
                    console.log("----"+ele.innerHTML)
                    tt=setTimeout("scrollText()",100);
                }

                window.onload = function() {

                    scrollable = document.querySelectorAll('.scrollable');

                    Array.prototype.forEach.call(scrollable, function(el, i){
                        ele= el;
                        id= i;
                        ele.innerHTML+='               '
                        try {
                            scrollText();                
                        }
                        catch(e){

                        }
                        console.log("**********************************************")
                    });

                }

                function stop(){
                    window.clearTimeout(tt);
                }
            </script>
            </head>

            <body>


            <div class=frmText>
                <p class='scrollable' onmouseover="stop()" onmouseout="scrollText()">Batman vs Superman scrolling text scrollTexts here</p>
                <p class='scrollable' onmouseover="stop()" onmouseout="scrollText()">Superman vs Batman scrolling text starts here</p>

            </div>

            </body>
            </html>

问题是它不适用于多个实例。我想剩下的唯一选择是去多线程我希望这段代码纯粹是在javascript中。

请帮助

Answer 1

我认为在你的元素上使用text-indent以及CSS转换更为谨慎。

为text-indent属性设置动画; 当text-indent达到负元素宽度时，将text-indent重置为0px; 设置animation-iteration-count：infinite;

如何制作可滚动文本的多个实例？它适用于一个实例

1 个答案: