您的位置：首页 > Web前端 > JavaScript
js分页实例

2015-11-20 21:23 691 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
#page {width: 100%;text-align: center;}
#page a {margin: 10px;}
#ul1 { width: 600px; list-style: none; height: 240px;background: #0cf;margin: 10px auto;position: relative;}
#ul1 li { width: 100px;height: 100px;background: red;margin: 10px;float: left; }
</style>
<script type="text/javascript" src="startMove.js" ></script>
<script type="text/javascript">
window.onload = function () {
var arr =[];
var iNow = 9;

var json = {
title : [
'title1',
'title2',
'title3',
'title4',
'title5',
'title6',
'title7',
'title8',
'title9',
'title10',
'title11',
'title12',
'title13',
'title14',
'title15',
'title16',
'title17',
'title18',
'title19',
'title20',
'title21',
'title22',
'title23',
'title24',
'title25',
'title26',
'title27',
'title28',
'title29',
'title30',
'title31',
'title32',
'title33',
'title34',
'title35'
]
}

page({
id : 'page',
nowNum : 1,
allNum : Math.ceil(json.title.length/10),
callBack : function(now,all) {
console.log('当前页 ：'+ now +',共'+all)
var num = now*10 < json.title.length ? 10 : json.title.length -(now-1)*10;  //每一页多少条
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');

if (oUl.innerHTML == '') {
for (var i = 0; i < num; i++) {
var oLi = document.createElement('li');
oLi.innerHTML = json.title[(now-1)*10+i];
oUl.appendChild(oLi);

}
for (var i = 0; i < aLi.length; i++) {
arr.push( [aLi[i].offsetLeft , aLi[i].offsetTop] );

};
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.left = arr[i][0] + 'px';
aLi[i].style.top = arr[i][1] + 'px';
aLi[i].style.margin = 0;
};
} else {
var timer1 = setInterval(function() {
startMove(aLi[iNow],{ 'left' : 200,'top' : 250, 'opacity' : 0 });
if (iNow <= 0) {
clearInterval(timer1);
iNow = num - 1;

for (var i = 0; i < num; i++) {
aLi[i].innerHTML =
d5ef
json.title[(now-1)*10+i]
};
var timer2 = setInterval(function() {
startMove(aLi[iNow] , { 'left' : arr[iNow][0], 'top' : arr[iNow][1], 'opacity' : 100 });
if (iNow <= 0) {
clearInterval(timer2);
iNow = num - 1;  //之前的iNow == 0了
}else{
iNow--;
}

},100)
}else{
iNow--;
}

},100 );
}
}
})

}
function page(opt) {
if (!opt.id) {return};
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;

var callBack = opt.callBack || function(){};
var obj = document.getElementById(opt.id);

if (allNum >= 6 && nowNum >=5) {
var a = document.createElement('a');
a.href = '#1';
a.innerHTML = '首页';
obj.appendChild(a)
};

if (nowNum >= 2) {
var a = document.createElement('a');
a.href = '#'+(nowNum-1);
a.innerHTML = '上一页';
obj.appendChild(a)
};

if (allNum <= 5) {

for (var i = 1; i <= allNum; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ i +']'
}

obj.appendChild(a)
};

}else {
if (nowNum ==1 || nowNum == 2) {

for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+i;
if (i == nowNum) {
a.innerHTML = i;
} else {
a.innerHTML = '['+ (i) +']'
}

obj.appendChild(a)
};

}
else if(  (allNum - nowNum) <= 1 ) {    //opt.nowNum ==9 || opt.nowNum == 10
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#' + (allNum - 5 + i);
if( (allNum-nowNum == 0 && i==5) || (allNum - nowNum == 1 && i==4) ){
a.innerHTML = (allNum - 5 + i);
}else{
a.innerHTML = '['+ (allNum - 5 + i) +']';
}

obj.appendChild(a)
};

}
else {
for (var i = 1; i <= 5; i++) {
var a = document.createElement('a');
a.href = '#'+(nowNum-3+i);
if (i == 3) {
a.innerHTML = nowNum-3+i;
} else {
a.innerHTML = '['+ (nowNum-3+i) +']'
}

obj.appendChild(a)
};
}

}

if ((allNum-nowNum) >= 1) {
var a = document.createElement('a');
a.href = '#'+(nowNum+1);
a.innerHTML = '下一页';
obj.appendChild(a)
};
if (allNum >= 6 && (allNum-nowNum) >=3 ) {
var a = document.createElement('a');
a.href = '#'+allNum;
a.innerHTML = '尾页';
obj.appendChild(a)
};

callBack(nowNum,allNum);

var aBtn = obj.getElementsByTagName('a');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
var nowNum = parseInt(this.getAttribute('href').substring(1));

obj.innerHTML = '';
page({

id : opt.id,
nowNum : nowNum,
allNum : allNum,
// bBtn : true,
callBack : callBack

});
// callBack(nowNum,allNum);
return false;
}

};
}
</script>
</head>
<body>
<ul id="ul1"></ul>
<div id="page"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 分页 js分页 js分页实例
相关文章推荐
新的分享
章节导航