XScroll.js更新:加入交错切换效果,附思路

原XScroll发布文见此:http://www.cnblogs.com/lixlib/archive/2012/03/21/javascript-tupian-qiehuan-xscroll_js.html

2012-4-13:

加入了交错切换效果。看示例页第一个例子——现在我可以说XScroll.js支持17种切换效果了吗。。。还是心虚

所谓的交错切换,就是当前图片向左移动,下一张图片向右移动,各自移动到一半时,就都往回移动,但此时图片叠加顺序改变,下一张图片将覆盖当前图片。

交错切换也支持4个方向。

交错切换的实现思路:

首先,不可避免的要同时操作两张图片:当前图片与下张图片,分别叫curS与nextS吧。我用向左滚动来举例,滚动发生前,把下张图片设为显示——但排在当前图片下面所以你看不到。两张图片的起始位置,都是0,这个很好理解。

滚动要开始了,两张图片向相反的方向滚动,所以这时两张图片各需要一个终点。由于不能让两张图片拉开过度结果变成两半了,所以他们各自移动的距离加起来应该不能超过图片区总宽度,当然,最好是等于总宽度,不多不少。

为了省事,我直接设他们的滚动距离为图片区总宽度的一半。例如当前图片向左滚200,下张图片向右滚200,总宽度为400。现在可以看到,当前图和下张图的终点位置是相反的:一个-200,一个200.所以只要设置其中一个的终点值,另一个加个负号就可以了。

因为他们滚动到终点位置时,需要改变方向,往回滚。所以我加入一个变量来决定是否该往回滚了,叫yes,当yes为假时,就可以往回滚了。

var t = 0,
                    b0 = 0, //起点
                    c = curS.e-b0, //移动距离,curS.e表示curS的终点,提前赋值
                    ing = 50,
                    direct = this.direct,
                    speed = this.speed,
                    //pos = {    },
                    yes = 1; 

继续,编写滚动函数。滚动函数的第一步,就是判断yes,以便后面的操作。

function runing(){
                        if(yes) {
                            
                                    
                        } else {
                            
                            
                        }
                        
                    }

我们知道,当yes为真的时候,curS与nextS应该“劳燕分飞”向两边跑,此时他们的起点都是0,终点是相反的,所以移动距离也完全相反.

if(yes) {
    curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px';
    nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px';
    setTimeout(runing,speed);
                        
}

大家看上面的代码,其中tween是缓动公式,b0是起点,c是移动距离,由于nextS的移动距离与curS的相反,所以nextS的移动距离就是-c.

当然,这个函数还是不行的,不能因为yes就一直往两边跑啊,要判断什么时候把yes给变成false,往回跑。

因为有缓动公式的存在,所以我们判断往回跑的时机很简单,即t++已经超过了ing(即动画执行完毕了)。

if(yes) {
                            
                            if(t < ing){
                                curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px';
                                nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px';
                                setTimeout(runing,speed);
                                
                            } else {
                                yes = 0;
                                t = 0;
                                curS.style.zIndex = 5;
                                nextS.style.zIndex = 10;
                                setTimeout(runing,speed);
                                
                            }
                        }

动画完毕(即curS与nextS分别到达终点),此时就可以把yes变成false了;由于t一直在++变得很大,所以我们把t再次设为初始值0;而且,往回滚的时候,当前图就应该隐蔽到下张图的下面了,所以改变他们各自的zIndex;最后,不要忘了再次调用函数执行,不然图片就回不去了。

回滚的时候要注意,现在curS的起点变成了他原来的终点,nextS的起点也变成了nextS自己的终点,但他们现在的终点就变成了他们原来的起点了,就是0.同时,由于是往回滚,所以他们的移动距离也就反过来了。

function runing(){
                        if(yes) {
                            
                            if(t < ing){
                                curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px';
                                nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px';
                                setTimeout(runing,speed);
                                
                            } else {
                                yes = 0;
                                t = 0;
                                curS.style.zIndex = 5;
                                nextS.style.zIndex = 10;
                                setTimeout(runing,speed);
                                
                            }
                        } else {
                            if(t < ing ){
                                curS.style[direct] = Math.floor(tween(t++,curS.e,-c,ing)) +'px';
                                nextS.style[direct] = Math.floor(tween(t++,nextS.e,c,ing))+'px';
                                setTimeout(runing,speed);
                            } else {
                                yes = 1;
                                t = 0;
                                nextS.style[direct] = 0;
                                curS.style[direct] = 0;
                                root.after();
                            }
                        }
                        
                    }

回滚也是需要结束的,可以也通过动画执行时间是否完毕来判断(建议增加更严格的判断条件,如curS的坐标已经超过0了),回滚结束要做的事:把yes变回true;把t变回0;调用收尾函数;同时,你也可以再次确认下curS与nextS是否到达指定位置。

以上,就是交错切换的实现思路。累死了。

不知道有没有效率更好的方法,希望大牛们给我指点一二。

XScroll官方更新日志

posted on 2012-04-13 16:53  十年灯  阅读(2312)  评论(0编辑  收藏  举报