前端 html h5 移动端 手机端 仿ios左滑删除效果
2017-12-05 23:40
405 查看
1 window.addEventListener('load',function(){ 2 var initX; 3 var moveX; 4 var X = 0; 5 var objX = 0; 6 var width=$(".removeJs").width();//按钮的宽度(removeJs修改为按钮的className) 7 var liClassName=".route-item";//li的className(route-item修改为li的className) 8 $("body").on("touchstart",liClassName,function (event) { 9 var obj=this; 10 initX = event.targetTouches[0].pageX; 11 objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; 12 if( objX == 0){ 13 $("body").on('touchmove',liClassName,function(event) { 14 // event.preventDefault(); 15 var obj=this; 16 moveX = event.targetTouches[0].pageX; 17 X = moveX - initX; 18 if (X > 0) { 19 obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 20 } 21 else if (X < 0) { 22 var l = Math.abs(X); 23 obj.style.WebkitTransform = "translateX(" + -l + "px)"; 24 if(l>width){ 25 l=width; 26 obj.style.WebkitTransform = "translateX(" + -l + "px)"; 27 } 28 } 29 }); 30 } 31 else if(objX<0){ 32 $("body").on("touchmove",liClassName,function (event) { 33 // event.preventDefault(); 34 var obj=this; 35 moveX = event.targetTouches[0].pageX; 36 X = moveX - initX; 37 if (X > 0) { 38 var r = -width + Math.abs(X); 39 obj.style.WebkitTransform = "translateX(" + r + "px)"; 40 if(r>0){ 41 r=0; 42 obj.style.WebkitTransform = "translateX(" + r + "px)"; 43 } 44 } 45 else { //向左滑动 46 obj.style.WebkitTransform = "translateX(" + -width + "px)"; 47 } 48 }); 49 } 50 }) 51 $("body").on("touchend",liClassName,function (event) { 52 var obj=this; 53 objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; 54 if(objX>-width/2){ 55 obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 56 }else{ 57 obj.style.WebkitTransform = "translateX(" + -width + "px)"; 58 } 59 }) 60 })
View Code
ps:实际项目中,只需修改如下两行代码即可:
var width=$(".removeJs").width(); var liClassName=".route-item";
注意:touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动,如果设置了e.preventDefault(),那么列表将无法上下滚动。
ps:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
相关文章推荐
- 2018移动端h5项目分享|移动端HTML5+css3|web前端开发
- 移动端h5长按删除效果
- 一入前端深似海,从此红尘是路人系列第十二弹之移动端模拟IOS虚拟按钮效果
- MUI - H5实现ios长按图标后进入图标排序及删除功能的效果
- IOS移动端(H5)alert/confirm提示信息去除网址(URL)
- 如何判断H5移动端是IOS还是安卓
- iOS 删除字符串中html标签
- 取消a标签在移动端点击时的背景颜色 && 去除ios手机端input输入框上方有阴影
- iOS移动端(H5)alert/confirm提示信息去除网址(URL)
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
- 前端使用html+css,表单型效果自我实现
- ios移动端切图及前端规范
- H5移动端实现仿QQ空间照片上传效果代码
- 干货|移动端H5前端性能优化
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
- ios移动端切图及前端规范
- <html5+css3+js>用javascript显示隐藏,添加,删除元素,css动画效果
- 移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- iOS开发之仿新闻拖拽排序,编辑删除的效果