<!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 = 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分頁實例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
網頁加載效果（利用圖片加載）
function loading(){ var oSpan=oLoad.getElementsByTagName('span')[0]; var aDiv=oLoad.getElementsByTa