分页效果（二）

制作时间：12:30-14：00

重点：通过回调函数编写切换内容效果。

下面是实现的简单效果。
（浏览器没有截取gif功能，只能录成WMV再转gif了，有点麻烦。）

效果图

1. 通过之前编写的 page() 方法中添加回调： callBack(nowNum,allNum); 把当前页数和总页数传给回调函数。
2. 编写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;}

3. 手动设置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',
        ]
    }

4. 在调用 page() 方法中编写回调函数。
   我设置了35条效果数据。每一页显示10条，但是第4页就只有5条数据了。那么设置一个变量 num 为每一页能够显示的数量。

var num= now*10 < json.title.length ? 10 : json.title.length-(now-1)*10;

5. 获取容器

var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");

6. 判断容器内是否已经有内容了。如果没有则创建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条数据。

7. 考虑到之后需要将这些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";
}

8. 接下来考虑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);

分页效果（二）结束

不积跬步无以至千里