js client offset scroll width 

<!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>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>

<body>
    <div style="width:400px;height:100px;margin:50px auto;">
        <div id="noticetxt" style="width:600px;height:30px;border:1px dashed;padding:5px;line-height:30px;white-space: nowrap;overflow: hidden;"><span id="" style="color:red">通知：</span><span>要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨</span></div>
    </div>
    <div style="width:200px;height:200px;border:1px solid;padding:20px;margin:100px;line-height:30px;overflow: hidden;" id="box">
        要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨， 要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨，
    </div>

    <script type="text/javascript">
        //js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息
        //clientHeight(clientWeight):指定的内容宽度(随内容高度)+padding
        //offsetWidth(offsetHeight): 指定的内容宽度+padding+border
        //scrollWidth(scrollHeight):真实内容的宽度（包含溢出）+（padding-top）
        var divNotice = document.getElementById('noticetxt');
        var timer = setInterval(function() {
            var originLeft = divNotice.scrollLeft;
            divNotice.scrollLeft = originLeft + 1;
            var moveLeft = divNotice.scrollLeft;
            if (originLeft === moveLeft) {
                //clearInterval(timer);
                divNotice.scrollLeft = 0;
            }
        }, 10)
    </script>
</body>

</html>

 

posted @ 2020-12-21 16:53  howhy  阅读(46)  评论(0)    收藏  举报