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);
最新文章
- css zoom属性兼容ie,firefox,chrome
- Android Studio 之 no render target selected
- android studio 控制台中文乱码
- 欧几里德算法 GCD
- tomcat有哪些性能调优方法
- 他们在军训,我在搞OI(三)
- 5.5.3使用terminfo功能标志
- 通过修改注册表来破解sqlyog
- GDI 对象的释放与内存泄漏的问题研究
- cocos2d-x中的Tiled地图
- 经典排序算法(Java实现)
- JQuery中Checkbox的一些功能
- layer插件
- Flag
- BZOJ 3817 Sum
- JS-函数作用域
- destructuring
- Oracle BBED 工具 说明
- LL(1),LR(0),SLR(1),LR(1),LALR(1)的 联系与区别
- cf Queries on a String
热门文章
- java 发送http请求
- visual studio2017 创建Vue项目
- POJ 1979 Red and Black (BFS)
- 25.partial update内置乐观锁并发控制
- 2.Git可视化操作
- [bzoj2588][Spoj10628]Count on a tree_主席树
- MySQL Workbench出现:Error Code: 2013. Lost connection to MySQL server during query的问题解决
- HDU 4530
- 通过UrlRewriter配置MVC4伪静态
- ftk学习记(label篇)