html5左右滑动页面效果实现

The Demo of h5 slider achiev by Myself

主要思路：

　　设置一个容器container，然后里面有几个page，获取到屏幕的宽度并将其赋值给page，然后container设置宽度为page.length*width;

　　这时所有的page将会一字排开，将body设置overflow:hidden; width:100%;这样的就只能显示一个page；

　　再container上设置transform:translateX(),这是用来进行偏移就可以看不同的page；

　　移动端需要使用touch事件来触发函数，实现效果：

　　touchstart中：

　　　　获取到手指触摸时的X坐标，startX = event.pageX;

　　　　获取到当前位置的偏移量endX，初始化为0；

　　touchmove:

　　　　在手指移动过程中，改函数会一直被触发；

　　　　通过pageX获得实时坐标位置moveX = event.pageX ，通过和start比较可以知道手指是向哪边滑动了；

　　　　滑动有以下限制：

　　　　　　第一个page时，不能在往左边滑动；

　　　　　　最后一个page时，不能向右滑动；

　　　　最后通过设置translateX()使盒子随着手指进行滑动：container.style.webkitTransform = "translateX(" ( endX moveX ) "px)";

　　touchend:

　　　　判断滑动的方向：

　　　　　　向左：相当于整个container容器往右边移动一个page的宽度:container.style.webkitTransform = "translateX(" ( endX page.width ) "px)";

　　　　　　向右：整个container往左移动:container.style.webkitTransform = "translateX(" ( endX - page.width ) "px)";

　　事件的绑定：

　　　　container.addEventListener("touchstart", XX(函数名), false):

　　　　container.addEventListener("touchstart", XX(函数名), false):

　　　　container.addEventListener("touchstart", XX(函数名), false);  

 

更多专业前端知识，请上 【猿2048】www.mk2048.com