前端開發日常——CSS影片無限輪播-有解無憂

　　近來沒有什么值得寫的東西，空閑的時候幫前端的同學做了些大屏上的展示模塊，就放在這里寫寫吧，手把手“需求->設計-> 實作”，受眾偏新手向，

　　為了直觀便于理解，直接把結果貼在上面，

　　如上所示，基本需求比較簡單明了， “分頁顯示供應商、供應占比串列，自動輪播”，

　　一、需求評審

　　該有的環節還是要有，盡管需求簡單，評審不能省略，無論形式，開發的同學千萬不要真的相信需求就這么簡單，否則南轅北轍，出力不討好，那必定是日常-_-||，

　　于是有豐富填坑經驗的開發同學，對于這個簡單的模塊需求，可能會提出如下的一些問題

　　1. 如果只有一頁，要不要輪播？

　　2.每頁的輪播間隔頻率是多少？

　　3.如果串列沒有資料，如何顯示這個模塊？

　　4.資料的重繪時機？是翻頁重繪，輪播一圈重繪，還是其他？

　　5.這個綠色的比值是什么含義？是不是還有紅色？

　　6.百分比的小數位？

　　7.如果介面例外比如網路不通，如何表示這種例外？

　　8.供應商的名字會不會有500字那么長？放不下如何布局？

　　……等等

　　以上任何一個未明確的需求，都可能成為你編碼完成后的一個bug或優化建議， o(*￣︶￣*)o，

　　二、設計評審　　

　　關于上面待確認的每一個問題，我們偉大的產品經理都一一耐心的給出了“令人信服的”回答后，還是不能馬上開始編碼，下面我們需要進行一些技術方案的設計討論，由技術leader把關，例如：

　　1. 資料流，這個串列的資料，是從資料庫中的哪幾個表取出的？確認下查詢邏輯，

　　2.介面設計，是一次回傳前端所有資料，還是支持分頁查詢，

　　3.性能考慮，查詢頻率是不是較高，并發是不是大，缺不缺索引，要不要上快取？

　　4.輪播如何實作？有沒有已經集成的輪播控制元件，是否滿足要求，還是需要自己寫一個，

　　5.如何進行模塊化開發，作為一個模塊集成嵌入到整體頁面中，

　　……等等

　　明確了以上的問題后，作為前端同學的我，是不是可以開始擼代碼了？

　　三、想清楚再寫

　　說到這里，

　　一類同學已經開始著手編碼了，第一個想到需要寫的方法可能是，ajax 去后臺請求資料串列的介面，

　　另一類同學，可能仍在構思，如何組織代碼，提煉主要的資料結構和功能方法，

　　這里我們顯然應該向“另外一類”同學學習，想清楚再寫，是一個毫無疑問的好習慣，

　　技術預研

　　實作一個功能，首先要掃除其中的未知技術點，掃除了所有未知之后，才能夠優化的組織實作方案，

　　上面的需求對于我這種半吊子前端來說，比較關鍵的兩個技術問題是，

　　1）用什么方案來實作滑動影片， 2）如何實作“無限滾動”，

　　滑動影片——經過一番百度，總結下影片可能的實作方案，包括用JS實作或者用CSS實作，各有優劣，js 兼容性好，控制靈活；CSS性能高，平滑流暢，因為我們的影片非常線性，簡單，于是這里我們決定采用CSS影片作為影片的實作方案，

　　通過簡單的研究，我們已經弄清楚了，想讓一個頁面元素具有一個影片效果，可以通過向他添加一個包含了影片關鍵真的選擇器來實作，比如定義一個滑出影片類，把這個css類加到元素上，元素就可以實作滑出的影片效果，

　　無限滾動——思考下滾動頁面，雖然對于資料來說可能會分成很多頁，但對于螢屏展示來說，實際上最多同時出現兩個頁面，一個是前一頁，一個是當前頁，在不滾動的時候只有當前頁需要顯示，

　　順著這個思路，滾動這個動作對應，“當前頁飛入”“前一頁飛出”這兩個細分動作，特別的情況是，初始顯示時，是沒有“前一頁”的，

　　那么滾動這個動作大概思路就是，

　　1. 根據當前頁號取得對應資料，繪制HTML頁面，append到滾動區域，對其添加“飛入”影片

　　2. 根據當前頁號取得上一頁頁面元素，對其添加“飛出”影片，影片結束后將其移除, 僅顯示當前頁，

　　四、編碼實作

　　終于到了編碼的時間了，

　　用到的 css 影片類選擇器，以及關鍵幀　

.slip_in_animation{
    animation: slip_in 1s;
}

.slip_out_animation{
    animation: slip_out 1s;
}

/*右側滑入*/
@keyframes slip_in
{
    from {transform:translateX(100%);}
    to {transform:translateX(0);}

}

/*右側滑入*/
@keyframes slip_out
{
    from {transform:translateX(0);}
    to {transform:translateX(-100%);}
}

　　js應用于頁面元素，飛入飛出，飛出后洗掉，*影片在結束后并不會改變元素實際位置，所以要在影片結束前，移除元素，避免它回到之前位置，擋住當前頁，發生“閃爍”

    //頁面滑入，要顯示的頁面
    this.slipIn = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_in_animation");
    };

    //頁面滑出，
    this.slipOut = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_out_animation");

        //移除上一頁,定時比影片稍短，避免閃爍
        setTimeout(function(){
            $("#supplierListPage_"+pageNo).remove();
        },900);
    };

　　翻頁的邏輯，第一次不滾動；滾到頭，把最后一頁飛出，第一頁飛入，

    this.switchNext = function(pageNo){

        //附加生成新的頁面
        var newPageHtml =  _this.makePageHtml(pageNo);
        $("#"+ _this.containerId).append(newPageHtml);

        //多于一頁的情況
        if(_this.firtshow){
            _this.firtshow= false;
            //第一次換頁 不需要移除之前頁面，
        }else{
            //前面已經有顯示過的頁面，需要把前面的頁面滾動出去，
            var olderPage =  pageNo -1;
            if(olderPage <=0){
                //當前頁是第一個，前一頁就是最后一頁
                olderPage = _this.totalPage;
            }
            _this.slipOut(olderPage);
        }
        _this.slipIn(pageNo);
    };

　定時滾動到下一頁，如果是最后一頁，重新開始第一頁，

    this.startRolling = function(){
            _this.switchNext(_this.curPage);

            //按間隔輪播
            _this.switchTimer =  setInterval(function(){

                if(_this.totalPage == 1)
                    return;

                if(_this.curPage < _this.totalPage) {
                    _this.curPage++;
                }else{
                    _this.curPage = 1;
                }
                _this.switchNext(_this.curPage);
            },_this.switchInterval);
    };

寫到這里，下面是完整代碼，需要的可以參考，

完整的代碼CSS：

.slip_in_animation{
    animation: slip_in 1s;
}

.slip_out_animation{
    animation: slip_out 1s;
}

/*右側滑入*/
@keyframes slip_in
{
    from {transform:translateX(100%);}
    to {transform:translateX(0);}

}

/*右側滑入*/
@keyframes slip_out
{
    from {transform:translateX(0);}
    to {transform:translateX(-100%);}
}

View Code

完整JS：

function SupplierListTable(){

    var _this = this;
    //echart 圖表物件，

    //輪播間隔 毫秒
    this.switchInterval = 5000;

    //當前輪播的頁，從1開始
    this.curPage=1;

    //每頁條數
    this.pageSize = 5;

    //當前資料對應總頁數
    this.totalPage = 0;

    //資料串列
    this.chartDataList = new Array();


    //第一次展示標志
    this.firtshow =true;

    this.containerId = null;
    //輪播定時器
    this.switchTimer = null;

    this.init  = function(containerId){
        _this.containerId = containerId;
        //初始化圖表
        $("#"+containerId).html("");
        _this.reloadData(containerId);
    };


    this.getTotalPage = function(){
       var totalPage  = Math.ceil(_this.chartDataList.length/_this.pageSize);
       return totalPage;
    };

    this.reloadData =https://www.cnblogs.com/uncleguo/p/function(containerId){


        //從網路請求資料，

        setTimeout(function(){

            _this.chartDataList= [
                {name:"供應商1",percent:"12%"},
                {name:"供應商2",percent:"13%"},
                {name:"供應商3",percent:"14%"},
                {name:"供應商4",percent:"15%"},
                {name:"供應商5",percent:"16%"},
                {name:"供應商6",percent:"13%"},
                {name:"供應商7",percent:"14%"},
                {name:"供應商8",percent:"15%"},
                {name:"供應商9",percent:"16%"}

                ];


            _this.totalPage = _this.getTotalPage();
            _this.curPage = 1;


            _this.stopRolling();
            _this.startRolling();

        },300);

    };


    this.stopRolling= function(){
        if(_this.switchTimer != null){
            clearInterval(_this.switchTimer);
            _this.switchTimer = null;
            _this.curPage = 0;
        }
    };


    this.startRolling = function(){
            _this.switchNext(_this.curPage);

            //按間隔輪播
            _this.switchTimer =  setInterval(function(){

                if(_this.totalPage == 1)
                    return;

                if(_this.curPage < _this.totalPage) {
                    _this.curPage++;
                }else{
                    _this.curPage = 1;
                }
                _this.switchNext(_this.curPage);
            },_this.switchInterval);
    };

    this.switchNext = function(pageNo){

        //附加生成新的頁面
        var newPageHtml =  _this.makePageHtml(pageNo);
        $("#"+ _this.containerId).append(newPageHtml);

        //多于一頁的情況
        if(_this.firtshow){
            _this.firtshow= false;
            //第一次換頁 不需要移除之前頁面，
        }else{
            //前面已經有顯示過的頁面，需要把前面的頁面滾動出去，
            var olderPage =  pageNo -1;
            if(olderPage <=0){
                //當前頁是第一個，前一頁就是最后一頁
                olderPage = _this.totalPage;
            }
            _this.slipOut(olderPage);
        }
        _this.slipIn(pageNo);
    };

    //生成指定頁的html，
    this.makePageHtml = function(pageNo){

        var startRecIndex=  _this.pageSize * (pageNo - 1);
        var endRecIndex =   _this.pageSize *  pageNo ;

        if(endRecIndex > _this.chartDataList.length){
            endRecIndex = _this.chartDataList.length;
        }

        var html = "<div style='width: 100%;  box-sizing: border-box;position: absolute;padding: 20px;' id='supplierListPage_" +pageNo+"'>";
        for (var i = startRecIndex; i < endRecIndex; i++) {
            html+= "<div style=' margin-bottom: 10px  ;border-bottom: 1px solid #484752;'><span style='color: white'>" +_this.chartDataList[i].name+"</span>  <span style='float: right;color: #0c9c6e'>"+_this.chartDataList[i].percent+"</span></div>"
        }
        html+="</div>"

        return html;
    };

    //頁面滑入，要顯示的頁面
    this.slipIn = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_in_animation");
    };

    //頁面滑出，
    this.slipOut = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_out_animation");

        //移除上一頁,定時比影片稍短，避免閃爍
        setTimeout(function(){
            $("#supplierListPage_"+pageNo).remove();
        },900);
    };

}


$(document).ready(function(){

    var containerId = 'supplierListChart';

    var supplierListTable = new SupplierListTable();
    supplierListTable.init(containerId);

});

View Code

HTML頁面容器：

<div  style="height: 300px;width:400px;overflow-x: hidden;position: relative" id="supplierListChart" >
</div>

View Code

本文來自博客園，作者：鍋叔
轉載請注明原文鏈接：https://www.cnblogs.com/uncleguo/p/16809968.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/518762.html

標籤：HTML5

上一篇：有沒有辦法在websockets中處理http請求？

下一篇：為自己的博客園添加motto漂浮效果^_^