移动手机端 kv切换滑动演示的小案例

freeqs · 发表于 2011-6-14 16:13:54

最初只想要做一个类似于iphone滑动切换的效果，看了一些网上的例子，自己做了一个下图（交互型）

它的原理是在kv层上盖一个透明的动态面板（Kvbar），在动态面板的两端设置两个透明的区域（KV左边缘，KV右边缘），在Kvbar的onDrag上写上代码：做向左边拖，kvbar碰到kv左边缘，右侧下一个kv替换当前，向右边拖，kvbar看到kv右边缘，左侧上一个kv替换当前，同时下面的小点切换到kv相应的位置。

在完成之后我发现，虽然实现了拖动的操作，但是kv本身就点不到了，如果是导航有标签切换功能，或者上下拖动的滚动内容页，在onDrag和onClick事件只能二选其一！

所以我又做了下面的另一个演示型的原型，将拖动的效果做成一连串的源码动画，并把指示标签放在一侧，当点击标签时画面会做滑动的演示，这样kv中的链接还能点，也能说明他的操作方式，一举两得（只是在演示的时候尽量不要点击其他的操作，以免出现错乱），见下图

所有的变量操作都写在手型图标的onClick中，这里在移动动态面板时我用了相对地址，这样就算是把整个kv移动到其他位置也不会出现xy错位的问题

下面是相关地址：

（axure6.0）

方宇 · 发表于 2011-7-22 13:08:02

不错！学习啦~

张良 · 发表于 2011-7-27 22:22:09

谢谢，学习了

若比邻 · 发表于 2011-7-28 10:26:55

谢谢不错的效果

diver · 发表于 2011-8-17 11:43:02

这个很酷学习

themad · 发表于 2011-8-24 16:09:53

很不错。

Diana-luo · 发表于 2011-8-30 15:36:38

我是初学者，呵呵，学习啦~谢谢~

海中的橙子 · 发表于 2011-8-30 15:45:28

我是初学者

正扬 · 发表于 2011-10-20 11:26:36

左右边缘怎么找不到呢

毛毛熊1010 · 发表于 2011-10-27 13:05:19

谢谢，学习了：）

高跃华 · 发表于 2012-12-13 10:27:15

谢谢不错的效果webppd:angel

ceshi155 · 发表于 2012-12-28 12:53:45

学习下！呵呵

winterlaef · 发表于 2013-5-22 15:01:04

下载了代码，还在模仿中，有些地方不知道怎么设置啊

smilepp · 发表于 2013-6-15 17:13:57

很厉害，我也学学

移动手机端 kv切换 滑动演示的小案例

移动手机端 kv切换滑动演示的小案例