客户端元素滑动和滚动效果实现

 

最近一直在搞一些有关元素动态展示的功能，这么做是为了增加用户的体验，使得客户端更加的具有和用户之间的交互作用；

下面是我这篇文章的大纲：

1，介绍两种插件，实现元素轮番展示和拖动元素滑动的效果；

2，插件参数的介绍；

3，扩展功能的提出和实现；

4，一些悬而未解的问题，写在最后希望高手指点迷津，经验交流，小生不胜感激！

进入正题：

(1)为大家介绍两款插件，使用起来比较简单，要是需要更高级的效果，还可以自己实现；一个是jquery插件：jcarousellite，一个是iscroll插件；官方地址分别是：

http://www.gmarwaha.com/jquery/jcarousellite/index.php和http://cubiq.org/iscroll-4

下面就写点自己使用过程中的一些感悟，一般网页上实现元素的滑动或者滚动都是使用ul元素进行封装，为什么要这么做？我在一个美女空间里发现了她写的一篇日志，解释的挺不错，在这里我就偷一下懒，引用她的观点了：

重组div的结构。

重组的主要目的是，在原div的里面添加一个div(player)，在player里面添加另一个div(box)。这里两个div我觉得是非常有有必要的，后面要设置player的css，并且实际上滚动字幕的容器是player，位置变化，真正滚动的部分是box。当然，palyer的任务可以交给外面的div来完成，box的工作和任务可以交给里面的ul来完成，这样对设计师来说，原来的div还是div，只是用来布局的，没有任何影响。而里面的ul，有的设计师喜欢定义整个页面所有的ul的css，我怕会对我的字幕里的ul产生什么现在还不能预料的影响，所以在ul的外面嵌套一个div。（引用地址：http://apps.hi.baidu.com/share/detail/852064）

iscroll中的滑动原理也是一样的，模式也是div+div+ul+li 简单点说：最外面的一层div可以看成是一个显示器，显示器下的第一个子元素就可以当做一个滚动元素的box，可以看成是一个滚动条，显示的元素多少，是有显示器的宽度来决定的，滚动的长短是由box的宽度来决定的；

jcarousellite 实现滚动，官方文档中介绍的很详细，这里我就不做过多的说明；

(2)

jcarousellite参数

Js代码

$.fn.jCarouselLite = function(o) {
     o = $.extend({
         btnPrev: null,   //上一张按钮
         btnNext: null,   //下一张按钮
         btnGo: null,      //跳转到第几张
         mouseWheel: false,   //是否支持鼠标滚轮，需要jquery.mousewheel.js
         auto: null,   //是否自动滚动

         speed: 200,   //滚动时长
         easing: null,   //滚动优化，需要jquery.easing.1.1.js

         vertical: false,   //滚动方向，true垂直，false水平
         circular: true,   //是否重复播放，首位相接
         visible: 3,         //显示图片数量
         start: 0,           //从第几个开始滚动显示
         scroll: 1,          //每次滚动数量

         beforeStart: null,   //滚动前调用函数
         afterEnd: null        //滚动后调用函数
     }, o || {});

iscroll 参数

这个就NB 了，里面的参数挺多的，下面就说一下比较特殊的几个，其他的基本参数就可以自己在iscroll中的API中查找，地址：http://cubiq.org/iscroll，若你感觉读官方文档比较吃力的话，这里有一篇翻译过来的，个人感觉不错：http://hi.baidu.com/ali_myself/blog/item/7cbe2aa296b1459046106419.html

iscroll4官方文档给出了5个例子，都挺经典的，有兴趣的可以仔细的研读一下；特别是pullUp/Down Refresh 这个在手机应用中经常能看到；

this.x /this.y:判断元素scroll left/right滑动距离可以使用this.x，这个参数是返回的结果是滑动元素li:first，距离最左边的一个距离，就相当于原点，scroll left ,this.x<0;scroll rigth ,this.x >0;同样，scroll也提供了 this.y ，这个可以参考pullUp/Down refresh例子中的js写法；

snap:捕获元素，通常设置为true，这样元素的滑动，是一屏一屏的滑动，你也可以设置成只捕获一个li元素，但是写法有要求：你可以写成“ li " or "li .a"但是”#scroller li" is wrong;

(3)

这里有个需求：iscroll只能实现元素的单方向的滑动，不能实现像jcarousellite那样的轮番循环的滑动，如果能把iscroll的滑动结合jcarousellite的循环展示，这该多好啊；

于是，就开始了我的工作：

1)判断元素向左向右滑动，

2)滑动一个元素，就把隐藏到div中的那个元素移到li元素的最后，可以直接的使用jquery操作元素，改变li布局，也可以改变li样式position，但是，实验证明：只改动position：left的坐标，下次获取元素的时候，使用eq()或者nth-child()方法获取的都不是指定的元素，这里我想到了使用refresh()；好像也没有起作用，最后只能保险起见，先挪动position样式，然后更改li元素的位置，这样，不至于出现错误；

code：onScrollEnd:function(){

            if(thisX > 0){
                this.minScrollX=450;
                var last = $("#thelist li").last();
                $("#thelist li").first().before(last);
                for(var i=0;i<=4;i++){
                        var positions = $("#thelist li").eq(i).position().left;console.log("..."+$("#thelist li").eq(0));
                        $("#thelist li").eq(i).css("left","+=90");
                        if(positions >=360){
                            $("#thelist li").eq(i).css("left","0px");
                        }
                        this.minScrollX -= 90;//alert(this.minScrollX);myscroll.refresh();
                    }
            }else if(thisX < 0){//alert(this.options.bounce);
                var first = $("#thelist li").first();
                //var scrollWidth = 450;
                $("#thelist li").last().after(first);           
                    this.maxScrollX = 450;
                    for(var i=0;i<=4;i++){
                        //$(".scroller").css("width",scrollWidth+"px");
                        var positions = $("#thelist li").eq(i).position().left;
                        $("#thelist li").eq(i).css("left","-=90");
                        if(positions <= 0){
                            $("#thelist li").eq(i).css("left","360px");
                        }
                        this.maxScrollX += 90;//scrollWidth += 90;$(".scroller").css("width",scrollWidth+"px");
                    }
            }
        },

 

3)实现了，但是有个bug：每次的滑动都要先反弹，然后才能更换位置，这个原因是：我把置换位置的操作放到 了 方法onscrollEnd中执行了,应该放到onscrollMove中执行；而这又引发了另外的一种问题出现：滑动的时候，会闪屏，这个原因是因为每次的鼠标onmousemover事件都相应的触发了我写的置换元素位置的方法；这样，也就遇到了问题；怎样才能在onscrollMove中完美的实现滚动；

(4)问题：

怎样通过判断鼠标拖动的距离来判断应该滑动几个li元素；

怎样实现向左向右的滑动，而不会出现上面提到的反弹；