跑马灯

Posted 2020-11-25 zhumother

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑马灯相关的知识，希望对你有一定的参考价值。

1.文字过长时，跑马灯展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .pao-box{
            display: inline-block;
            width: 57%;
            overflow: hidden;
            white-space:nowrap;
            font:normal normal 18px/44px ‘PingFangSC-Regular‘;
            color: #fff;
        }
       .pao-text.padding{
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span class="pao-box" data-select="" data-editor="">
                <span class="pao-content">
                       <span class="pao-text">新华网北京2月19日电支持配置文案</span>
                 </span>
         </span>
    </div>
    <script src=‘jquery.js‘></script>
    <script>
        var box=$(‘.pao-box‘);
        var content=$(‘.pao-content‘);
        var text=$(‘.pao-text‘);
        var boxWidth=box.width();
        var textWidth=text.width();
        var position=0;
        checkScrollLeft()
        function toScrollLeft(){
            //  如果文字长度大于滚动条距离，则递归拖动
            if(textWidth > box.scrollLeft()){
                box.scrollLeft(position++)
                setTimeout(‘toScrollLeft()‘, 18);
            }
            else{
                setTimeout("fun2()",2000);
            }
        }
        function checkScrollLeft(){
            // 判断文字长度是否大于盒子长度
            if(boxWidth > textWidth){ return false}
            content.append($(".pao-text").clone());
            $(‘.pao-text:first‘).addClass(‘padding‘)
            // 更新
            textWidth = text.outerWidth()
            toScrollLeft()
        }
        function fun2(){
            position=0
            box.scrollLeft(position)
            toScrollLeft();
        }
        
    </script>
</body>
</html>

//2.跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sstzNoticeStyle{
            font-size:16px;
            text-decoration:none;
        }
        .sstzNoticeStyle:hover{
            font-size:16px;
            text-decoration:none;
        }
        .paomadeng{
            width: 100%; 
            margin-left: auto; 
            margin-right: auto; 
            height: 47px; 
            overflow: hidden;
        }
        .paomadeng ul{
            position:absolute;
            left:0; 
            top:0;
            margin: 0px;
            margin-bottom:0px;
            width:100%;
            height:47px;
        }
        .paomadeng ul li{
            list-style: none;
            display:inline-block;
            float:left;
            height:47px;
            line-height:47px;
            padding-right:50px;
        }
    </style>
</head>
<body>
    <div class="paomadeng">
        <ul id="syNoticeUlNew">
            <li>
                <span>gggg</span>
            </li>
            <li>
                <span>bbbbb</span>
            </li>
            <li>
                <span>dddddd</span>
            </li>
            <li>
                <span>bbbbbffff</span>
            </li>
            <li>
                <span>dsdsds</span>
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        function syRunHorseLight() {
        if (syTimer != null) {
            clearInterval(syTimer);
        }
        var oUl = document.getElementById("syNoticeUlNew");
        if(oUl != null){
            oUl.innerHTML += oUl.innerHTML;
            oUl.innerHTML += oUl.innerHTML;
            oUl.innerHTML += oUl.innerHTML;
            var lis = oUl.getElementsByTagName(‘li‘);
            var lisTotalWidth = 0;
            var resetWidth = 0;
            for (var i = 0; i < lis.length; i++) {
                lisTotalWidth += lis[i].offsetWidth;
            }
            for (var i = 1; i <= lis.length / 4; i++) {
                resetWidth += lis[i].offsetWidth;
            }
            oUl.style.width = lisTotalWidth + ‘px‘;
            var left = 0;
            syTimer = setInterval(function() {
                left -= 1;
                if (left <= -resetWidth) {
                    left = 0;
                }
                oUl.style.left = left + ‘px‘;
            }, 20)
            $("#syNoticeUlNew").hover(function() {
                clearInterval(syTimer);
            }, function() {
                clearInterval(syTimer);
                syTimer = setInterval(function() {
                    left -= 1;
                    if (left <= -resetWidth) {
                        left = 0;
                    }
                    oUl.style.left = left + ‘px‘;
                }, 20);
            })
        }
    }
    var syTimer=null
    syRunHorseLight()
    </script>
</body>
</html>

以上是关于跑马灯的主要内容，如果未能解决你的问题，请参考以下文章