JS 实现文字左右滚动，必不可少的样式

最新推荐文章于 2022-03-25 14:41:44 发布

转载最新推荐文章于 2022-03-25 14:41:44 发布 · 171 阅读

文章标签：

本文提供了一个使用纯JavaScript实现的中文字符滚动示例。通过不断更新元素的位置来达到文字滚动的效果，适用于网页标题栏等需要跑马灯效果的场景。

<div id="dvvv" style="overflow: hidden; height: 27px; width: 750px;">
                                                    <div id="dvvv1">
                                                        <ul style="padding-left: 0px; margin-top: 0px;">
                                                            <li style="list-style-type: none;white-space:nowrap">
                                                               中文为什么就不行,中文为什么就不行中文为.什么就不行中文为什么就不行中文，为什么就不行中。文为什么。就不行中文为什么就不行中文为什。么就不行中文为什么就不行中文为什么就不行中文为什么就不行中文为什么就不行。中文为什么。就不行中文为什么就不行中文。为什么就不行中文为什么就不。行中文为什么就不行中。文为什么就不行中文为什么就。不行中文为什。么就不行中文为什么。就不行么就不行中文为什么就不行中文为什么就不行。中文为什么。就不行中文为什么就不行中文。为什么就不行中文为什么就不。行中文为什么就不行中。文为什么就不行中文为什么就。不行中文为什。么就不行中文为什么。就不行</li>。
                                                        </ul>
                                                    </div>
                                                    <div id="dvvv2">
                                                    </div>
                                                </div>

<script type="text/javascript">
             var speded=30
             dvvv2.innerHTML=dvvv1.innerHTML
             function Marqpuee(){
             if(dvvv2.offsetWidth-dvvv.scrollLeft<=0)
             dvvv.scrollLeft-=dvvv1.offsetWidth
             else{
             dvvv.scrollLeft++
             }
             }
             var MyMmar=setInterval(Marqpuee,speded)
             dvvv.onmouseover=function() {clearInterval(MyMmar)}
             dvvv.onmouseout=function() {MyMmar=setInterval(Marqpuee,speded)}
        </script>