2. 程式人生 > 程式設計 >原生JS實現酷炫分頁效果

原生JS實現酷炫分頁效果

阿新 • • 發佈：2021-08-23

本文例項為大家分享一個如下效果的分頁特效，是不是很酷炫。

原生JS實現酷炫分頁效果

以下是程式碼實現：

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實現酷炫分頁</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        li {
            list-style: none;
        }
 
        #ul1 {
            width: 600px;
            height: 250px;
        }
 
        #ul1 li {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            overflow: hidden;
            margifbHGQhGS
 
n: 10px;
        }
 
        a {
            margin: 5px;
        }
    </style>
    <!-- 引入運動函式 -->
    <script type="text/" src="js/move.js"></script>
    <script>
        window.onload = function () {
 
            var json = {
                title: [
                    '效果1','效果2','效果3','效果4','效果5','效果6','效果7','效果8','效果9','效果10','效果11','效果12','效果13','效果14','效果15','效果16','效果17','效果18','效果19','效果20','效果21','效果22','效果23','效果24','效果25','效果26','效果27','效果28','效果29','效果30','效果31','效果32','效果33','效果34'
                ]
            };
            //建立陣列，儲存佈局座標
            var arr = [];
            //從最後一個li開始運動，下標為9
            var iNow = 9;
 
            page({
 
                id: 'div1',nowNum: 1,//計算總頁數，除以10並向上取整
                allNum: Math.ceil(json.title.length / 10),callBack: function (now,all) {
                    //如果當前頁乘以10小於json.title.length，載入10條
                    //如果當前頁乘以10大於json.title.length,載入本例中剩於的4條
                    var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10;
                    //獲取ul
                    var oUl = document.getElementById('ul1');
                    //獲取li
                    var aLi = oUl.getElementsByTagName('li');
 
                    //如果不前ul裡面的的內容為空
                    if (oUl.innerHTML == '') {
                        //迴圈num次
                        for (var i = 0; i < num; i++) {
                            //建立li
                            var oLi = document.createElement('li');
                            //設定li的內容，如果now為0，那麼[(now-1)*10 + i]從第1個分配內容
                            //設定li的內容，如果now為1，那麼[(now-1)*10 + i]從第11個分配內容
                            oLi.innerHTML = json.title[(now - 1) * 10 + i];
                            //將li新增到ul中
                            oUl.appendChild(oLi);
                        }
                        //迴圈遍歷
                        for (var i = 0; i < aLi.length; i++) {
                            //向arr中壓入每個li的left和top值
                            arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
                        }
                        //迴圈遍歷
                        for (var i = 0; i < aLi.length; i++) {
                            //修改每個li的定位為絕對定位
                            aLi[i].style.position = 'absolute';
                            //重新分配left的值
                            aLi[i].style.left = arr[i][0] + 'px';
                            //重新分配top的值
                            aLi[i].style.top = arr[i][1] + 'px';
                            //把影響定位的margin值歸0
                            aLi[i].style.margin = 0;
                        }
 
                    } else {
                        //設定定時器，依次執行每個效果的動畫
                        var timer = setInterval(function () {
                            //執行move.js中的strartMove函式,從下標為iNow的li開始，修改left/top/opacity值
                            startMove(aLi[iNow],{ left: 200,top: 250,opacity: 0 });
                            //當運動的li為最後一個時
                            if (iNow == 0) {
                                //清除定時器
                                clearInterval(timer);
                                //iNow下標值為當前載入數量減1,本例中載入10條為9，載入4條為3
                                iNow = num - 1;
                                //點選標籤頁時，更換顯示內容
                                for (var i = 0; i < num; i++) {
                                    aLi[i].innerHTML = json.title[(now - 1) * 10 + i];
                                }
 
                                //設定彈出的定時器
                                var timer2 = setInterval(function () {
                                    //執行move.js中的strartMove函式,從下標為iNow的li開始
                                    //將每個li的屬性值還原到第一次運動前儲存的值
                                    startMove(aLi[iNow],{ left: arr[iNow][0],top: arr[iNow][1],opacity: 100 });
                                    //當運動的li為最後一個時
                                    if (iNow == 0) {
                                        //清除定時器
                                        clearInterval(timer2);
                                        //iNow下標值為當前載入數量減1,本例中載入10條為9，載入4條為3
                                        iNow = num - 1;
                                    } else {
                                        //iNow遞減，依次執行
                                        iNow--;
                                    }
 
                                },100);
 
                            } else {
                                //iNow遞減，依次執行
                                iNow--;
                            }
 
                        },100);
 
                    }
 
                }
 
            });
 
        };
 
        function page(opt) {
 
            if (!opt.id) { return f
 
alse };
 
            var obj = document.getElementById(opt.id);
 
            var nowNum = opt.nowNum || 1;
            var allNum = opt.allNum || 5;
            var callBack = opt.callBack || function () { };
 
            if (nowNum >= 4 && allNum >= 6) {
 
                var oA = document.createElement('a');
                oA.href = '#1';
                oA.innerHTML = '首頁';
                obj.appendChild(oA);
 
            }
 
            if (nowNum >= 2) {
                var oA = document.createElement('a');
                oA.href = '#' + (nowNum - 1);
                oA.innerHTML = '上一頁';
                obj.appendChild(oA);
            }
 
 www.cppcns.com
 
           if (allNum <= 5) {
                for (var i = 1; i <= allNum; i++) {
                    var oA = document.createElement('a');
                    oA.href = '#' + i;
                    if (nowNum == i) {
                        oA.innerHTML = i;
                    } else {
                        oA.innerHTML = '[' + i + ']';
                    }
                    obj.appendChild(oA);
                }
            } else {
 
                for (var i = 1; i <= 5; i++) {
                    var oA = document.createElement('a');
 
                    if (nowNum == 1 || nowNum == 2) {
 
                        oA.href = '#' + i;
                        if (nowNum == i) {
                            oA.innerHTML = i;
                        } else {
                            oA.innerHTML = '[' + i + ']';
                        }
 
                    } else if ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
 
                        oA.href = '#' + (allNum - 5 + i);
 
                        if ((allNum - nowNum) == 0 && i == 5) {
                            oA.innerHTML = (allNum - 5 + i);
                        } else if ((allNum - nowNum) == 1 && i == 4) fbHGQhGS{
                            oA.innerHTML = (allNum - 5 + i);
                        } else {
                            oA.innerHTML = '[' + (allNum - 5 + i) + ']';
                        }
 
                    } else {
                        oA.href = '#' + (nowNum - 3 + i);
 
                        if (i == 3) {
                            oA.innerHTML = (nowNum - 3 + i);
                        } else {
                            oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
                        }
                    }
                    obj.appendChild(oA);
 
                }
 
            }
 
            if ((allNum - nowNum) >= 1) {
                var oA = document.createElement('a');
                oA.href = '#' + (nowNum + 1);
                oA.innerHTML = '下一頁';
                obj.appendChild(oA);
            }
 
            if ((allNum - nowNum) >= 3 && allNum >= 6) {
 
                var oA = document.createElement('a');
                oA.href = '#' + allNum;
                oA.innerHTML = '尾頁';
                obj.appendChild(oA);
 
            }
            callBack(nowNum,allNum);
            var aA = obj.getElementsByTagName('a');
            for (var i = 0; i < aA.length; i++) {
                aA[i].onclick = function () {
                    var nowNum = parseInt(this.getAttribute('href').substring(1));
                    obj.innerHTML = '';
                    page({
                        id: opt.id,nowNum: nowNum,allNum: allNum,callBack: callBack
 
                    });
 
                    return false;
 
                };
            }
 
        }
    </script>
</head>
 
<body>
    <ul id="ul1"></ul>
    <div id="div1"></div>
</body>
 
</html>

引入的運動函式程式碼：

function startMove(obj,json,endFn) { 
    clearInterval(obj.timer); 
    obj.timer = setInterval(function () { 
        var bBtn = true; 
        for (var attr in json) {
 
            var iCur = 0;
 
            if (attr == 'opacity') {
                if (Math.round(parseFloat(getStyle(obj,attr)) * 100) == 0) {
                    iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100);
 
                } else {
                    iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100) || 100;
                }
            } else {
                iCur = parseInt(getStyle(obj,attr)) || 0;
            }
 
            var iSpeed = (json[attr] - iCur) / 3;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (iCur != json[attr]) {
                bBtn = false;
            }
 
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
 
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
 
        }
 
        if (bBtn) {
            clearInterval(obj.timer);
 
            if (endFn) {
                endFn.call(obj);
            }
        }
 
    },30);
 
}
 
 
function getStyle(obj,attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj,false)[attr];
    }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

原生JS實現酷炫分頁效果

本文例項為大家分享一個如下效果的分頁特效，是不是很酷炫。 以下是程式碼實現：

Flutter 實現酷炫的3D效果示例程式碼

此文講解3個酷炫的3D動畫效果。 下面是要實現的效果： Flutter 中3D效果是通過 Transform 元件實現的，沒有變換效果的實現：

Flutter 實現酷炫的3D效果

老孟導讀：此文講解3個酷炫的3D動畫效果。 下面是要實現的效果： Flutter 中3D效果是通過Transform元件實現的，沒有變換效果的實現：

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

技術標籤：qt tablewidget 實現tab來回切換 外掛化寫法： HTML： tab1 tab2 tab3 tab4 tab5 頁面1

Vue元件庫ElementUI實現表格列表分頁效果

ElementUI實現表格列表分頁效果教程，供大家參考，具體內容如下 Element UI 是一套採用 vue 2.0 作為基礎框架實現的元件庫，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的元件庫，提供了配套設計資源，幫助網

原生js實現簡單輪播圖效果

本文例項為大家分享了 + element ui實現錨點定位的具體程式碼，供大家參考，具體內容如下

原生js實現分頁效果

本文例項為大家分享了js實現分頁效果的具體程式碼，供大家參考，具體內容如下

使用原生JS實現滾輪翻頁效果的示例程式碼

一、滾輪事件 當用戶通過滑鼠滾輪與頁面互動、在垂直方向上滾動頁面時，就會觸發mousewheel事件，這個事件就是實現全屏切換效果需要用到的。在IE6,IE7,IE8,Opera 10+,Safari 5+中，都提供了 “mousewheel” 事件，而

原生js實現分頁快取

前言 　內容涉及知識點: 　　1.後臺分頁查詢概念 　　2.原生ajax請求 　　3.閉包

js實現簡單的前端分頁效果

有些專案業務比較簡單，但用到前端分頁的地方又比較多，外掛的體積比較難控制用起來也麻煩，所以自己寫一個簡易的。

JS實現前端分頁效果

本文例項為大家分享了實現前端分頁效果的具體程式碼，供大家參考，具體內容如下

原生JS實現分頁點選控制元件

這是一個面試題，要求使用原生實現一個分頁點選控制元件，供大家參www.cppcns.com考，具體內容如下

js物件實現資料分頁效果

本文例項為大家分享了物件實現資料分頁效果的具體程式碼，供大家參考，具體內容如下

原生js實現日曆效果

本文例項為大家分享了js實現日曆效果的具體程式碼，供大家參考，具體內容如下

原生JS實現螢火蟲效果

本文例項為大家分享了JS實現螢火蟲效果的具體程式碼，供大家參考，具體內容如下

原生js實現瀑布流效果

本文例項為大家分享了js實現瀑布流效果的具體程式碼，供大家參考，具體內容如下

原生JS實現煙花效果

原生JS實現煙花效果，點選頁面生成煙花，向四周擴散，然後再墜落下去。（這裡的煙花我是用的特殊字元愛心形狀）

Unity3D實現列表分頁效果

本文例項為大家分享了Unity3D實現列表分頁效果的具體程式碼，供大家參考，具體內容如下

javascript實現前端分頁效果

本文例項為大家分享了javascript實現前端分頁效果的具體程式碼，供大家參考，具體內容如下

Xadmin控制元件的實現：〇四查詢檢視二——分頁效果的實現

在前面的一章裡我們實現瞭如何在一個頁面裡按照表格的方式顯示出來所需要的資料，但是隨著資料量的增加，需要做一個分頁的效果。