跑马灯

时间：2020-02-20 11:41:08 阅读：99 评论：0 收藏：0 [点我收藏+]

标签：跑马灯效果 ott cti osc ddd notice top margin editor

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>

跑马灯

标签：跑马灯效果 ott cti osc ddd notice top margin editor

原文地址：https://www.cnblogs.com/zhuMother/p/12334913.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行