首页 > 代码库 > 跑马灯《此方法为优化方法，内容不会有闪动效果》

跑马灯《此方法为优化方法，内容不会有闪动效果》

2024-09-06 19:32:15   208人阅读


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
//css部分

    <style type="text/css">
        #box {
            height: 30px;
            width: 800px;
            line-height: 30px;
            background-color: pink;
            white-space: nowrap;
            /*此属性表示强制不换行哦*/
            overflow: hidden;

        }
        #box div {
            display: inline-block;
            /*让两个div并排显示*/
        }
        #box span {
            color: red;
            font-weight: 900;
        }
    </style>

</head>
<body>
<div id="print">
    <div id="box">
        <div id="content1">
            <span>通知：</span>客服投诉热线：86-10-58511234 违法和不良信息举报电话：4006609686 客服邮箱：kf@vip.sohu.com 举报邮箱：jubao@contact.sohu.com
        </div>
        <div id="content2">
            <span>通知：</span>客服投诉热线：86-10-58511234 违法和不良信息举报电话：4006609686 客服邮箱：kf@vip.sohu.com 举报邮箱：jubao@contact.sohu.com
        </div>
    </div>
</div>

//js部分

<script type="text/javascript">
    var oBox = document.getElementById("box");
    var oprint = document.getElementById("pront");
    var oContent1 = document.getElementById("content1");
    var oContent1_width = getCss(oContent1,"width");//获取div id="content1"的宽度
    window.setInterval(function () {
        oBox.scrollLeft ++;
        var curleft = oBox.scrollLeft;
        if (curleft > oContent1_width){//当div id="content1"的内容已经到尾部的时候立马又从头开始
            oBox.scrollLeft = 0;
        }
    },10);
//注明：想了解如何快速通过属性名来获取属性值
function getCss(curEle,attr) {}
的方法吗？敬请关注“前端微迅”，回复“代码”获取，扫一扫即可

技术分享

跑马灯《此方法为优化方法，内容不会有闪动效果》






























        

            
                
                  
                
                

                    联系

                    我们