制作時間：12:30-14：00
重點：通過回調函數(shù)編寫切換內(nèi)容效果。
下面是實現(xiàn)的簡單效果。
（瀏覽器沒有截取gif功能，只能錄成WMV再轉gif了，有點麻煩隧饼。）
- 通過之前編寫的
page()方法中添加回調：callBack(nowNum,allNum);把當前頁數(shù)和總頁數(shù)傳給回調函數(shù)。 - 編寫htmlh和css代碼静陈，作為紅色塊的容器燕雁。一開始設置成float為left屬性
<ul id="ul1"></ul>
#ul1{ width: 600px; height: 250px; }
#ul1 li{width: 100px; height: 100px; background-color: red; float:left; overflow: hidden; margin: 10px;}
- 手動設置json數(shù)據(jù)。這里沒有涉及通過ajax來調取服務器數(shù)據(jù)庫中數(shù)據(jù)鲸拥，所以只能手動編寫 json 數(shù)據(jù)拐格。
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',
'效果35',
]
}
- 在調用
page()方法中編寫回調函數(shù)。
我設置了35條效果數(shù)據(jù)刑赶。每一頁顯示10條捏浊，但是第4頁就只有5條數(shù)據(jù)了。那么設置一個變量num為每一頁能夠顯示的數(shù)量撞叨。
var num= now*10 < json.title.length ? 10 : json.title.length-(now-1)*10;
- 獲取容器
var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
- 判斷容器內(nèi)是否已經(jīng)有內(nèi)容了金踪。如果沒有則創(chuàng)建li元素。如果有了牵敷，則是改變里面的內(nèi)容胡岔。
先假設還沒有內(nèi)容，那么要做的就是把數(shù)據(jù)的前10條加載到頁面上枷餐。
for (var i=0; i < num; i++){
var oLi = document.createElement("li");
oLi.innerHTML = json.title[(now-1)*10 + i];
oUl.appendChild(oLi);
}
注意： 獲取json格式數(shù)據(jù)方法： json.title[...]
剛開始加載頁面時靶瘸，這里的 now (當前頁) 在第一頁，所以可以通過 json.title[(now-1)*10 + i] 提取從 json.title[0] ~ json.title[9] 這10條數(shù)據(jù)毛肋。
如果是第二頁怨咪，根據(jù)這行代碼，就能提取 json.title[10] ~ json.title[19]
第四頁時：因為 num = 5 所以根據(jù)這個 for 循環(huán)润匙，能提取 json.title[30]~json.title[34]` 這最后5條數(shù)據(jù)诗眨。
- 考慮到之后需要將這些li元素進行動畫，勢必會有位置變動趁桃，而且現(xiàn)在的li元素只是浮動元素辽话。之后不能對其進行位置改變肄鸽。
解決辦法：
1.先將他們各自的位置存儲到一個數(shù)組中
2.設置position屬性為absolute,再把數(shù)組中的位置值賦回去
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";
}
- 接下來考慮ul容器中已經(jīng)有l(wèi)i元素的情況卫病。
(1) 將之前的li元素通過動畫消失掉
看效果圖油啤，消失的順序是從最后的元素開始的。
通過循環(huán)將元素的位置都挪到 left:200 , top:250 的地方蟀苛，并且使透明度變成0益咬，實現(xiàn)消失掉的效果。
設置一個變量 inum 存儲執(zhí)行動畫的元素索引帜平。
var inum = 10;
var timer = setInterval(function(){
$(aLi).eq(inum).animate({ left:200 , top:250 , opacity:0});
inum--;
},150);
很顯然是幽告，這是有錯誤的。inum不可能一直減下去裆甩。所以添加一個判斷：
if(inum==0){
clearInterval(timer);
...
}
else{
inum--;
}
(2) 將接下來要顯示的元素通過相反的動畫顯示出來
當之前的元素消失掉時顯示冗锁，那么代碼應該寫在 clearInterval(timer); 后面。
首先將ul容器中的元素替換掉：
for(var i=0; i < num ;i++){
aLi[i].innerHTML = json.title[(now-1)*10 + i];
}
通過動畫顯示：
var timer2 = setInterval(function(){
if(num == 0){
clearInterval(timer2);
}else{
num--;
}
$(aLi).eq(num).animate({ left:arr[num][0], top:arr[num][1], opacity:1 });
},150);
分頁效果（二）結束
不積跬步無以至千里
