原生js 無縫滾動組件

時間 2019-12-16

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .rollBox{
            margin: 50px auto;
            padding: 0 20px;
            width: 300px;
            height: 310px;
            background: #FFF;
            overflow: hidden;
            border: 1px solid #666;
        }
        .rollBox2{
            margin: 50px auto;
            padding: 20px 0;
            width: 300px;
            height: 31px;
            background: #FFF;
            overflow: hidden;
            border: 1px solid #666;
        }
        .rollEl{
            /*margin: 20px;*/
            width: 300px;
        }
        .rollEl li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dotted #999;
            color: #555;
        }
        .rollEl2{
            width: 300px;
            height: 31px;
            font-size: 0;
        }
        .rollEl2 li{
            display: inline-block;
            padding: 0 20px;
            height: 30px;
            width: 260px;
            line-height: 30px;
            border-bottom: 1px dotted #999;
            color: #555;
            font-size: 14px;
        }
    </style>
    <script>
        window.onload = function () {
            var rollBox = document.getElementsByClassName('rollBox')[0];
            var rollEl = rollBox.getElementsByClassName('rollEl')[0];
            var rollBox2 = document.getElementsByClassName('rollBox2')[0];
            var rollEl2 = rollBox2.getElementsByClassName('rollEl2')[0];

            var rollElMove = new RollAnimate(rollBox,rollEl,'up',3000);
            var rollElMove2 = new RollAnimate(rollBox2,rollEl2,'left',4000);
        }

        function RollAnimate(parent,rollEl,dir,rillTime){
            this.parent = parent;
            this.rollEl = rollEl;
            this.dir = dir;
            this.rillTime = rillTime;
            this.elMove();
        }
        RollAnimate.prototype = {
            //獲取行間樣式
            getStyle:function(obj,attr){
              return  obj.attr = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            },
            //滾動
            elMove:function(){
                //獲取要滾動元素當前滾動的值
                var rollChild = this.rollEl.getElementsByClassName('rollChild');
                var len = rollChild.length;
                var iTaget = 0;
                //獲取滾動元素外框的高度
                var rollBoxSize = 0;
                var rollElSize = 0;
                //每次滾動的距離
                var rollNum = 0;
                //獲取滾動元素滾動前的子元素
                var sHtml = this.rollEl.innerHTML;
                var _this = this;
                //獲取單次滾動的數據
                if(this.dir == 'up') {
                    rollBoxSize = _this.parent.offsetHeight;
                    rollNum = parseInt(rollChild[0].offsetHeight);
                    rollElSize = rollNum*len;
                }else if(this.dir == 'left'){
                    rollBoxSize = _this.parent.offsetWidth;
                    rollNum = parseInt(rollChild[0].offsetWidth);
                    rollElSize = rollNum*len
                    this.rollEl.style.width = rollElSize + 'px';
//                    rollElSize = parseInt(_this.rollEl.offsetWidth);
                }

                setInterval(function () {
                    //修正滾動元素
                    if((rollElSize - Math.abs(iTaget)) <= parseInt(rollBoxSize)){
                        //若是滾到最後，增長滾動元素的子元素
                        _this.rollEl.innerHTML += sHtml;

                        //修改滾動元素高度,由於向上滾動，元素的高度會自適應，全部向上滾動時不須要設置
                        rollElSize *= 2;
                       if(_this.dir == 'left'){
                            _this.rollEl.style.width = rollElSize + 'px';
                       }

                    }else if(rollElSize/2 <= Math.abs(iTaget)){
                        //當全部的都滾動完成後，修正margin-top值、滾動的值還有滾動元素的子元素數量

                        rollElSize /= 2; //修改滾動元素高度

                        if(_this.dir == 'up'){

                            _this.rollEl.style.marginTop = 0;

                        }else if(_this.dir == 'left'){

                            _this.rollEl.style.marginLeft = 0;
                            _this.rollEl.style.width = rollElSize + 'px';

                        }

                        iTaget = 0;
                        _this.rollEl.innerHTML = sHtml;
                    }
                    //增長每次滾動的量
                    iTaget -= rollNum;

                    //執行單次滾動
                    if(_this.dir == 'up'){

                        _this.animate('margin-top',iTaget);

                    }else if(_this.dir == 'left'){

                        _this.animate('margin-left',iTaget);

                    }
                },_this.rillTime);
            },
            //單次滾動
            animate: function (attr,iTaget) {
                var _this = this;

                clearInterval(this.rollEl.timer);

                this.rollEl.timer = setInterval(function () {
                    //計算速度
                    var speed =(iTaget - parseInt(_this.getStyle(_this.rollEl,attr)))/8 ;
                    //判斷速度是正仍是負，正速度向上取整，負的向下取整
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed)
                    var dist = parseInt(_this.getStyle(_this.rollEl,attr));
                    if(dist == iTaget){
                        clearInterval(_this.rollEl.timer);
                    }else{
                        dist +=speed;
                        _this.rollEl.style[attr] = dist + 'px';
                    }
                },50)
            }
        }
    </script>
</head>
<body>

<div class="rollBox">
    <ul class="rollEl">
        <li class="rollChild">文字1</li>
        <li class="rollChild">文字2</li>
        <li class="rollChild">文字3</li>
        <li class="rollChild">文字4</li>
        <li class="rollChild">文字5</li>
        <li class="rollChild">文字6</li>
        <li class="rollChild">文字7</li>
        <li class="rollChild">文字8</li>
        <li class="rollChild">文字9</li>
        <li class="rollChild">文字10</li>
        <li class="rollChild">文字5</li>
        <li class="rollChild" style="color: #ff0000">文字6</li>
    </ul>
</div>
<div class="rollBox2">
    <ul class="rollEl2" style="width: 900px">
        <li class="rollChild">文字1</li>
        <li class="rollChild">文字2</li>
        <li class="rollChild" style="color: #ff0000">文字6</li>
    </ul>
</div>
</body>
</html>

有須要本身拿去修改下相應的參數應該是能夠使用，使用原生JS面相對象的寫法編寫，無需依賴其餘庫，很靈活,須要給滾動元素的子元素添加class="rollChild"html

demo無法提供，放上去提示錯誤，this.elMove is not a function，在本地能夠跑不報錯，對比 rollElMove.elMove == rollElMove2.elMove 也相等，結果爲true,不知道是什麼緣由，有知道的便宜請賜教。

下面是面向過程寫法this

DEMO演示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .rollBox{
            margin: 50px auto;
            padding: 0 20px;
            width: 340px;
            height: 310px;
            background: #FFF;
            overflow: hidden;
            border: 1px solid #666;
        }
        .rollEl{
            /*margin: 20px;*/
            width: 300px;
        }
        .rollEl li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dotted #999;
            color: #555;
        }
    </style>
    <script>
        window.onload = function () {
            var rollBox = document.getElementsByClassName('rollBox')[0];
            var rollEl = rollBox.getElementsByClassName('rollEl')[0];
            var rollHeight = rollEl.getElementsByTagName('li')[0].offsetHeight;
            var iTaget = parseInt(getStyle(rollEl,'margin-top'));
            var rollBoxHheight = parseInt(getStyle(rollBox,'height'))
            function move(obj, attr,target,fnEnd) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    //計算速度
                    var speed =(target - parseInt(getStyle(obj,attr)))/8 ;
                    //判斷速度是正仍是負，正速度向上取整，負的向下取整
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed)
                    var dist = parseInt(getStyle(obj,attr));
                    if(dist == target){
                        clearInterval(obj.timer);
                        fnEnd && fnEnd();
                    }else{
                        dist +=speed;
                        obj.style[attr] = dist + 'px';
                    }
                },50);
            }
            function getStyle(obj,attr) {//獲取計算後的樣式
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
//            move(rollEl,'margin-top',-rollHeight)
            setInterval(function () {
                iTaget-=rollHeight
                move(rollEl,'margin-top',iTaget);
            },2000);
        }
    </script>
</head>
<body>

<div class="rollBox">
    <ul class="rollEl">
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
        <li>文字9</li>
        <li>文字10</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
        <li>文字9</li>
        <li>文字10</li>
    </ul>
</div>
</body>
</html>

相關標籤/搜索

每日一句

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