个人设计网站论文摘要,让顾客进店的100条方法,百度宣传做网站多少钱,论坛模板建站需求描述 需要实现类似QQ中对联系人的操作#xff1a;向左滑动#xff0c;滑出删除按钮。滑动超过一半时松开则自动滑到底#xff0c;不到一半时松开则返回原处。 纯js实现 使用了h5的touchmove等事件#xff0c;以及用js动态改变css3的translate属性来达到动画效果#x…需求描述 需要实现类似QQ中对联系人的操作向左滑动滑出删除按钮。滑动超过一半时松开则自动滑到底不到一半时松开则返回原处。 纯js实现 使用了h5的touchmove等事件以及用js动态改变css3的translate属性来达到动画效果 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport idviewport contentwidthdevice-width, initial-scale1titlehtml5向左滑动删除特效/titlestyle* {padding: 0;margin: 0;list-style: none;}header {background: #f7483b;border-bottom: 1px solid #ccc}header h2 {text-align: center;line-height: 54px;font-size: 16px;color: #fff}.list-ul {overflow: hidden}.list-li {line-height: 60px;border-bottom: 1px solid #fcfcfc;position: relative;padding: 0 12px;color: #666;background: #f2f2f2;-webkit-transform: translateX(0px);}.btn {position: absolute;top: 0;right: -80px;text-align: center;background: #ffcb20;color: #fff;width: 80px}/stylescript/** 描述html5苹果手机向左滑动删除特效*/window.addEventListener(load, function() {var initX; //触摸位置var moveX; //滑动时的位置var X 0; //移动距离var objX 0; //目标对象位置window.addEventListener(touchstart, function(event) {event.preventDefault();var obj event.target.parentNode;if (obj.className list-li) {initX event.targetTouches[0].pageX;objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;}if (objX 0) {window.addEventListener(touchmove, function(event) {event.preventDefault();var obj event.target.parentNode;if (obj.className list-li) {moveX event.targetTouches[0].pageX;X moveX - initX;if (X 0) {obj.style.WebkitTransform translateX( 0 px);} else if (X 0) {var l Math.abs(X);obj.style.WebkitTransform translateX( -l px);if (l 80) {l 80;obj.style.WebkitTransform translateX( -l px);}}}});} else if (objX 0) {window.addEventListener(touchmove, function(event) {event.preventDefault();var obj event.target.parentNode;if (obj.className list-li) {moveX event.targetTouches[0].pageX;X moveX - initX;if (X 0) {var r -80 Math.abs(X);obj.style.WebkitTransform translateX( r px);if (r 0) {r 0;obj.style.WebkitTransform translateX( r px);}} else { //向左滑动obj.style.WebkitTransform translateX( -80 px);}}});}})window.addEventListener(touchend, function(event) {event.preventDefault();var obj event.target.parentNode;if (obj.className list-li) {objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;if (objX -40) {obj.style.WebkitTransform translateX( 0 px);objX 0;} else {obj.style.WebkitTransform translateX( -80 px);objX -80;}}})})/script
/headbodyheaderh2消息列表/h2/headersection classlistul classlist-ulli idli classlist-lidiv classcon你的快递到了请到楼下签收/divdiv classbtn删除/div/lili classlist-lidiv classcon哇你在干嘛快点来啊就等你了/divdiv classbtn删除/div/li/ul/section
/body/html 做成zepto插件 实际项目中我们可能有很多个地方会用到这个功能。现在我们将这个功能做成zepto插件方便后面使用。 这个插件我们仅实现这个功能然后传入参数删除按钮的样式名让程序在js中计算所需要滑动的距离方便复用。 zepto.touchWipe.js 1 /**2 * zepto插件向左滑动删除动效3 * 使用方法$(.itemWipe).touchWipe({itemDelete: .item-delete});4 * 参数itemDelete 删除按钮的样式名5 */6 ;7 (function($) {8 $.fn.touchWipe function(option) {9 var defaults {
10 itemDelete: .item-delete, //删除元素
11 };
12 var opts $.extend({}, defaults, option); //配置选项
13
14 var delWidth $(opts.itemDelete).width();
15
16 var initX; //触摸位置
17 var moveX; //滑动时的位置
18 var X 0; //移动距离
19 var objX 0; //目标对象位置
20 $(this).on(touchstart, function(event) {
21 event.preventDefault();
22 var obj this;
23 initX event.targetTouches[0].pageX;
24 objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;
25 if (objX 0) {
26 $(this).on(touchmove, function(event) {
27 event.preventDefault();
28 var obj this;
29 moveX event.targetTouches[0].pageX;
30 X moveX - initX;
31 if (X 0) {
32 obj.style.WebkitTransform translateX( 0 px);
33 } else if (X 0) {
34 var l Math.abs(X);
35 obj.style.WebkitTransform translateX( -l px);
36 if (l delWidth) {
37 l delWidth;
38 obj.style.WebkitTransform translateX( -l px);
39 }
40 }
41 });
42 } else if (objX 0) {
43 $(this).on(touchmove, function(event) {
44 event.preventDefault();
45 var obj this;
46 moveX event.targetTouches[0].pageX;
47 X moveX - initX;
48 if (X 0) {
49 var r -delWidth Math.abs(X);
50 obj.style.WebkitTransform translateX( r px);
51 if (r 0) {
52 r 0;
53 obj.style.WebkitTransform translateX( r px);
54 }
55 } else { //向左滑动
56 obj.style.WebkitTransform translateX( -delWidth px);
57 }
58 });
59 }
60
61 })
62 $(this).on(touchend, function(event) {
63 event.preventDefault();
64 var obj this;
65 objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;
66 if (objX -delWidth / 2) {
67 obj.style.transition all 0.2s;
68 obj.style.WebkitTransform translateX( 0 px);
69 obj.style.transition all 0;
70 objX 0;
71 } else {
72 obj.style.transition all 0.2s;
73 obj.style.WebkitTransform translateX( -delWidth px);
74 obj.style.transition all 0;
75 objX -delWidth;
76 }
77 })
78
79 //链式返回
80 return this;
81 };
82
83 })(Zepto); touchWipe.html 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 meta nameviewport idviewport contentwidthdevice-width, initial-scale16 titlehtml5向左滑动删除特效/title7 8 style9 *{ padding:0; margin:0; list-style: none;}
10 header{ background: #f7483b; border-bottom: 1px solid #ccc}
11 header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff}
12 .list-ul{ overflow: hidden}
13 .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666;
14 background: #f2f2f2;
15 -webkit-transform: translateX(0px);
16 }
17 .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}
18 /style
19
20 /head
21 body
22 header
23 h2消息列表/h2
24 /header
25 section classlist
26 ul classlist-ul
27 li idli classlist-li
28 div classcon
29 你的快递到了请到楼下签收
30 /div
31 div classbtn删除/div
32 /li
33 li classlist-li
34 div classcon
35 哇你在干嘛快点来啊就等你了
36 /div
37 div classbtn删除/div
38 /li
39 /ul
40 /section
41
42 pX: span idX/span/p
43 pobjX: span idobjX/span/p
44 pinitX: span idinitX/span/p
45 pmoveX: span idmoveX/span/p
46
47 script typetext/javascript srchttp://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js/script
48 script typetext/javascript srczepto.touchWipe.js/script
49 script typetext/javascript
50 $(function() {
51 $(.list-li).touchWipe({itemDelete: .btn});
52 });
53
54 /script
55 /body
56 /html 效果 实际项目中的应用效果 消除BUG 到上面一步基本实现了我们所需要的功能。但是有几个问题 1. 右边的删除按钮点击失灵因为span无法冒泡到大按钮上 2. 非常严重的问题我们给div添加了touchmove事件同时用preventDefault()屏蔽了原始的浏览器事件导致上下滑动div的时候 页面无法滚动了 第一个问题比较容易解决我们把span直接去掉将“删除”写到css中的:before里像这样 .itemWipe .item-delete:before {content: 删除;color: #fff;
} 对于第二个问题网上说用iscroll来解决。我们这里参考手机QQ中对联系人的滑动操作。 大致原理在滑动最开始的时候判断是Y轴的移动多 还是 X轴的移动多。 如果是X轴移动大则判断为滑动删除操作我们再使用preventDefault(); 其中我们加入一个变量flaxX来判断滑动方向会在第一次触发滑动事件时设置。 之后就可以根据滑动方向来选择是否阻止浏览器默认事件了。 修改后 zepto.touchWipe.js 1 /**2 * zepto插件向左滑动删除动效3 * 使用方法$(.itemWipe).touchWipe({itemDelete: .item-delete});4 * 参数itemDelete 删除按钮的样式名5 */6 ;7 (function($) {8 $.fn.touchWipe function(option) {9 var defaults {10 itemDelete: .item-delete, //删除元素11 };12 var opts $.extend({}, defaults, option); //配置选项13 var delWidth $(opts.itemDelete).width();14 15 var initX; //触摸位置X16 var initY; //触摸位置Y17 var moveX; //滑动时的位置X18 var moveY; //滑动时的位置Y19 var X 0; //移动距离X20 var Y 0; //移动距离Y21 var flagX 0; //是否是左右滑动 0为初始1为左右2为上下在move中设置在end中归零22 var objX 0; //目标对象位置23 24 $(this).on(touchstart, function(event) {25 console.log(start..);26 var obj this;27 initX event.targetTouches[0].pageX;28 initY event.targetTouches[0].pageY;29 console.log(initX : initY);30 objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;31 console.log (objX);32 if (objX 0) {33 $(this).on(touchmove, function(event) {34 35 // 判断滑动方向X轴阻止默认事件Y轴跳出使用浏览器默认36 if (flagX 0) {37 setScrollX(event);38 return;39 } else if (flagX 1) {40 event.preventDefault();41 } else {42 return;43 }44 45 var obj this;46 moveX event.targetTouches[0].pageX;47 X moveX - initX; 48 if (X 0) {49 obj.style.WebkitTransform translateX( 0 px);50 } else if (X 0) {51 var l Math.abs(X);52 obj.style.WebkitTransform translateX( -l px);53 if (l delWidth) {54 l delWidth;55 obj.style.WebkitTransform translateX( -l px);56 }57 }58 });59 } else if (objX 0) {60 $(this).on(touchmove, function(event) {61 62 // 判断滑动方向X轴阻止默认事件Y轴跳出使用浏览器默认63 if (flagX 0) {64 setScrollX(event);65 return;66 } else if (flagX 1) {67 event.preventDefault();68 } else {69 return;70 }71 72 var obj this;73 moveX event.targetTouches[0].pageX;74 X moveX - initX;75 if (X 0) {76 var r -delWidth Math.abs(X);77 obj.style.WebkitTransform translateX( r px);78 if (r 0) {79 r 0;80 obj.style.WebkitTransform translateX( r px);81 }82 } else { //向左滑动83 obj.style.WebkitTransform translateX( -delWidth px);84 }85 });86 }87 })88 89 //结束时判断并自动滑动到底或返回90 $(this).on(touchend, function(event) { 91 var obj this;92 objX (obj.style.WebkitTransform.replace(/translateX\(/g, ).replace(/px\)/g, )) * 1;93 if (objX -delWidth / 2) {94 obj.style.transition all 0.2s;95 obj.style.WebkitTransform translateX( 0 px);96 obj.style.transition all 0;97 objX 0;98 } else {99 obj.style.transition all 0.2s;
100 obj.style.WebkitTransform translateX( -delWidth px);
101 obj.style.transition all 0;
102 objX -delWidth;
103 }
104 flagX 0;
105 })
106
107 //设置滑动方向
108 function setScrollX(event) {
109 moveX event.targetTouches[0].pageX;
110 moveY event.targetTouches[0].pageY;
111 X moveX - initX;
112 Y moveY - initY;
113
114 if (Math.abs(X) Math.abs(Y)) {
115 flagX 1;
116 } else {
117 flagX 2;
118 }
119 return flagX;
120 }
121
122 //链式返回
123 return this;
124 };
125
126 })(Zepto);
