想了想还是重新写过卡盘的实现吧,当然,还是去实现那种一直向上滚的模式,因为我觉得这种方式在交互上,更重要的是用户体验上更人性化。
然后根据我之前写的卡盘,做了两种写法,(当然,这回我使用的是jquery)大致如下:
第一种方式是在最后一个li下面加克隆第一个li去实现的;
第二种方式是通过对第一个li进行判断,当到达卡盘滚动到最后一个节点时,把它定位到最后一个li的后面。然后再次滚动时,它就刚好是一直朝上滚动的,滚动完后,马上定位ul到第二个位置,当然此时的li删除定位,让它保持原来的状态。这样就实现了一直向上滚做法了。
然而事情总是看起来简单,当它再像淘宝卡盘那样多加1,2,3这样的边栏,让你知道具体滚到哪个地方时,事情就变得复杂了。
我这里采用了第二种方式去实现了,而且采用的是向左滚动:
HTML代码是这样的:
对应的CSS代码:
对应的脚本是:
上面我展示的是通过点击去达到回归所要看的目标的。当然,如果你需要用hover的话,那么就把click里的东西移到hover下。而且接口也不够开放,没有给出设定的时间,不过这个可以自行改动,问题不大。;)
主要是这里不能够运行js,不然的话,还可以做一个demo。我想以后还是自己建一个blog吧。