js实现文字超过显示宽度每间隔1s自动向左滚动显示

html:

<div id="wrapper" class="wrapper">
    <div class="inner">
        <p>文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。我是一个粉刷匠,粉刷本领强,我要把那新房子刷的更漂亮</p>    
    </div>
</div>

js:


 var wrapper = document.getElementById('wrapper');

    var inner = wrapper.getElementsByTagName('div')[0];

    var p = document.getElementsByTagName('p')[0];

    var p_w = p.offsetWidth;

    var wrapper_w = wrapper.offsetWidth;

    window.onload=function fun(){

        if(wrapper_w > p_w){ return false;}

        inner.innerHTML+=inner.innerHTML;

        setTimeout("fun1()",2000);

    }

    function fun1(){

        if(p_w > wrapper.scrollLeft){

            wrapper.scrollLeft++;

            setTimeout("fun1()",30);

        }

        else{

            setTimeout("fun2()",2000);

        }

    }

    function fun2(){

        wrapper.scrollLeft=0;

        fun1();

    }

css代码:

*{margin:0;padding:0;}

body{font:12px/1 '微软雅黑';}

.wrapper{font-size:0.85rem;color:#333;padding-top:0.75rem;margin:0 0.75rem;white-space:nowrap;overflow:hidden;width:300px;}

.inner{width:1000px;overflow:hidden;}

.inner p{display:inline-block;}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容