js实现字体滚动

滚动支持图片，文字
原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。
HTML代码

 <div id="demo">
        <div id="demoin">
            <div id="demo1">
                <a href="">致爱情</a>
                 <a href="">-----------</a>
                <a href="">曾经有一份真挚的爱情</a>
                <a href="">摆在我面前</a>
                <a href="">我没有珍惜</a>
                <a href="">等到失去的时候才后悔莫急</a>
                <a href="">人世间最痛苦的事莫过余此</a>
                <a href="">如果上天在给我一次机会</a>
                <a href="">我会对那个女孩说我爱你</a>
                <a href="">如果要在这份爱上加个期限</a>
                <a href="">我希望是一万年</a>
                <a href="">我爱你（矫情不？哈哈）</a>
                <a href="">-----刘旋</a>
                <a href="">2018年10月11日</a>
                <a href="">一个初级程序员悲痛欲绝爱的表达</a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>

CSS代码

#demo{
            width:1000px;
            height:30px;
            overflow:hidden;
            line-height:30px;
            font-size:13px;
            font-family:'宋体';
            background:#ddd url(images/notice.png) no-repeat 25px center;
            color:#0C77CF;
            font-weight:bold;
            margin: 0 auto;
        }
        #demoin {
            width: 900px;
            height: 30px;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
        }
        #demo #demo1, #demo #demo2{display:inline}

Javascript代码

 window.onload = function(){
        scrollLeft();
    };
    function scrollLeft(){
        var speed = 20;
        var tab = document.getElementById('demoin');
        var tab1 = document.getElementById('demo1');
        var tab2 = document.getElementById('demo2');
        tab2.innerHTML = tab1.innerHTML;
        function Marquee(){
            if(tab2.offsetWidth - tab.scrollLeft <=0) {        
                tab.scrollLeft = 0;
            }else{
                tab.scrollLeft ++;
            }

        }
        var timer = setInterval(Marquee,speed);
        tab.onmouseover = function(){
            clearInterval(timer);
        };
        tab.onmouseout = function(){
            timer = setInterval(Marquee,speed);
        }
    }

本站系本人编辑转载，转载目的在于传递更多信息，并不代表本人赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本人联系，我将在第一时间删除内容！[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。