JavaScript實(shí)現(xiàn)分頁效果
更新時(shí)間：2017年03月28日 11:29:35 作者：大大大大糖糖
本文主要介紹了JavaScript實(shí)現(xiàn)分頁效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<html>
<head>
<style>
*{padding:0;margin:0}
ul,li{list-style:none}
.left{float:left}
.right{float:left}
.page_container{height: 30px; line-height: 30px;width: 510px;overflow: hidden;text-align: center;padding: 30px 0;color: #757575;}
.page_num_container{width: 301px;margin:0 10px;border:1px solid #ccc; border-right:0;box-sizing: border-box;overflow: hidden;position: relative;height: 32px;}
.page_num_container ul{position: absolute;top: 0;}
.page_num_container ul li{float: left;width: 30px;border-right:1px solid #ccc ;box-sizing: border-box;text-align: center;cursor: pointer;}
.page_num_container ul li:hover,.page_num_container ul li.active{ background: #f4a100;color: #fff;}
.page_btn{width: 60px;border:1px solid #ccc;box-sizing: border-box;cursor: pointer;}
.page_btn:hover{ background: #f4a100;color: #fff;}
.all_page:hover{background:none;color: #757575;}
.prev_btn{margin-right: 10px;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!--頁碼-->
<div class="page_container center">
<div class="page_btn prev_page left">上一頁</div>
<div class="page_num_container left" id="page_num_container">
<ul>
<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>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
</ul>
</div>
<div class="page_btn next_page left">下一頁</div>
<div class="page_btn all_page right">共21頁</div>
</div>
<!--頁碼-->
<script>
function page(){
var contain=$(".page_num_container");
var ul= contain.children("ul");
var li = ul.children("li");
var length= li.length;
var index=0;
var leftIndex=0;
var prev_btn= contain.siblings(".prev_page");
var next_btn= contain.siblings(".next_page ");
ul.css("width",li.outerWidth()*length);
change_page(index);
function change_page(eqindex){
if(eqindex<0 )
{
index=0;
}
else if(eqindex>=length ){
index=length-1;
}
if(index-4<=0){
leftIndex=0;
}
else if(index>length-10)
{
leftIndex=Math.ceil(length/2);
}
else{
leftIndex=index-4;
}
ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
li.eq(index).addClass("active").siblings(li).removeClass("active");
}
prev_btn.click(function(){
index=index-1;
change_page(index);
})
next_btn.click(function(){
index=index+1;
change_page(index);
})
li.click(function(){
index=$(this).index();
change_page(index);
})
}
page()
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
js使用html()或text()方法獲取設(shè)置p標(biāo)簽的顯示的值
html()方法可以用來讀取或者設(shè)置某個(gè)元素中的HTML內(nèi)容，text()方法可以用來讀取或者沒置某個(gè)元素中的文本內(nèi)容2014-08-08
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jstree創(chuàng)建無限分級(jí)樹的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
這篇文章主要介紹了jstree創(chuàng)建無限分級(jí)樹的方法,結(jié)合實(shí)例形式分析了jstree基于ajax結(jié)合asp.net后臺(tái)動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)實(shí)現(xiàn)無限分級(jí)樹效果的相關(guān)步驟與操作技巧,需要的朋友可以參考下2016-10-10
微信小程序webview中wx.miniProgram.navigateTo()的使用方法及其問題解決方法
這篇文章主要介紹了微信小程序webview中wx.miniProgram.navigateTo()的使用方法及其問題解決方法,文章描述了微信小程序中web-view嵌入H5頁面時(shí)遇到的問題,特別是當(dāng)H5頁面中包含iframe時(shí),如何在iframe中實(shí)現(xiàn)跳轉(zhuǎn)到小程序的index頁面,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了Bootstrap對(duì)話框使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Webpack實(shí)現(xiàn)按需打包Lodash的幾種方法詳解
這篇文章主要給大家介紹了關(guān)于Webpack實(shí)現(xiàn)按需打包Lodash的幾種方法，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法,涉及javascript針對(duì)頁面元素樣式及屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas仿代碼流瀑布，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了個(gè)人小程序接入支付解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05