js文字無縫滾動

時間 2019-11-09

原文原文鏈接

今天要實現個文字滾動的效果，一開始試了<marquee></marquee>這個標籤，可是發現效果不太好，不能無縫滾動，並且在手機上有卡頓不太流暢。決定用js去實現。spa

首先寫個標籤，注意下標籤裏面文字的長度要超出標籤，由於我下面加了判斷，若是沒有超出就不會有滾動條，也就不會滾動哦~code

<style>
#scrollobj{
    min-width: 70px;          /*先在這裏寫個最小寬度*/
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}
</style>

<body>
    <div id="scrollobj">這裏是滾動內容純文字哈哈哈，滾動吧</div>
</body>

在你的頁面裏調用這個方法就ok了。blog

function sc() {
    var $scrollobj = document.getElementById('scrollobj');
    function scroll(self) {
        /*往左*/
        var tmp = (self.scrollLeft)++;
        //當滾動條到達右邊頂端時 
        if (self.scrollLeft == tmp) {
            self.innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;" + self.innerHTML;
        }
        //當滾動條滾動了初始內容的寬度時滾動條回到最左端 
        if (self.scrollLeft >= self.firstChild.offsetWidth) {
            self.scrollLeft = 0;
        }
    }

    if ($scrollobj.scrollWidth > $scrollobj.offsetWidth) {   // 判斷是否須要滾動
        var timer = setInterval(function () {
            scroll($scrollobj);
        }, 30);
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。