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

html:

文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。我是一个粉刷匠,粉刷本领强,我要把那新房子刷的更漂亮

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

你可能感兴趣的:(js实现文字超过显示宽度每间隔1s自动向左滚动显示)