制作时间：12:30-14：00
重点：通过回调函数编写切换内容效果。
下面是实现的简单效果。
（浏览器没有截取gif功能，只能录成WMV再转gif了，有点麻烦。）
效果图
- 通过之前编写的
page()方法中添加回调：callBack(nowNum,allNum);把当前页数和总页数传给回调函数。 - 编写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数据。这里没有涉及通过ajax来调取服务器数据库中数据，所以只能手动编写 json 数据。
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()方法中编写回调函数。
我设置了35条效果数据。每一页显示10条，但是第4页就只有5条数据了。那么设置一个变量num为每一页能够显示的数量。
var num= now*10 < json.title.length ? 10 : json.title.length-(now-1)*10;
- 获取容器
var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
- 判断容器内是否已经有内容了。如果没有则创建li元素。如果有了，则是改变里面的内容。
先假设还没有内容，那么要做的就是把数据的前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格式数据方法： json.title[...]
刚开始加载页面时，这里的 now (当前页) 在第一页，所以可以通过 json.title[(now-1)*10 + i] 提取从 json.title[0] ~ json.title[9] 这10条数据。
如果是第二页，根据这行代码，就能提取 json.title[10] ~ json.title[19]
第四页时：因为 num = 5 所以根据这个 for 循环，能提取 json.title[30]~json.title[34]` 这最后5条数据。
- 考虑到之后需要将这些li元素进行动画，势必会有位置变动，而且现在的li元素只是浮动元素。之后不能对其进行位置改变。
解决办法：
1.先将他们各自的位置存储到一个数组中
2.设置position属性为absolute,再把数组中的位置值赋回去
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容器中已经有li元素的情况。
(1) 将之前的li元素通过动画消失掉
看效果图，消失的顺序是从最后的元素开始的。
通过循环将元素的位置都挪到 left:200 , top:250 的地方，并且使透明度变成0，实现消失掉的效果。
设置一个变量 inum 存储执行动画的元素索引。
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);
分页效果（二）结束
不积跬步无以至千里
