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官方更新日志

转载于:https://www.cnblogs.com/lixlib/archive/2012/04/13/javascript-tupian-qiehuan-xscroll_js1.html

XScroll.js更新：加入交错切换效果,附思路相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
js代码实现繁体字切换效果
下载地址使用js代码实现网页上的简体中文和繁体字的切换效果,很实用的繁体字切换插件. dd:
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
JS图片轮播切换效果实现
效果演示地址:http://6689.one/WebEffects/pictureplay.html 实现代码如下: </pre> <pre name="code" ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...
php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码背景切换因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
js练习8(幻灯片切换效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS代码实现页面切换效果（上一页+具体页+下一页）
HTML+CSS部分添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. <!DOCTYPE html> <html><head ...

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

交错切换的实现思路：

XScroll.js更新：加入交错切换效果,附思路相关推荐

最新文章

热门文章