UNPKG

6.61 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
6 <meta name="format-detection" content="telephone=no">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="mobile-web-app-capable" content="yes">
9 <title>translateZ bug</title>
10 <link rel="stylesheet" href="style.css">
11</head>
12<body>
13 <ul id="j-list">
14 <li class="item">
15 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
16 <div class="item-body-pic"><img src="default.png"></div>
17 <div class="item-body-info">
18 <span class="item-body-name">标题标题标题标题</span>
19 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
20 <span class="item-body-date">2015.12.01—2015.12.03</span>
21 </div>
22 </a>
23 <a class="item-del" href="javascript:;">删除</a>
24 </li>
25 <li class="item">
26 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
27 <div class="item-body-pic"><img src="default.png"></div>
28 <div class="item-body-info">
29 <span class="item-body-name">标题标题标题标题</span>
30 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
31 <span class="item-body-date">2015.12.01—2015.12.03</span>
32 </div>
33 </a>
34 <a class="item-del" href="javascript:;">删除</a>
35 </li>
36 <li class="item">
37 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
38 <div class="item-body-pic"><img src="default.png"></div>
39 <div class="item-body-info">
40 <span class="item-body-name">标题标题标题标题</span>
41 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
42 <span class="item-body-date">2015.12.01—2015.12.03</span>
43 </div>
44 </a>
45 <a class="item-del" href="javascript:;">删除</a>
46 </li>
47 <li class="item">
48 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
49 <div class="item-body-pic"><img src="default.png"></div>
50 <div class="item-body-info">
51 <span class="item-body-name">标题标题标题标题</span>
52 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
53 <span class="item-body-date">2015.12.01—2015.12.03</span>
54 </div>
55 </a>
56 <a class="item-del" href="javascript:;">删除</a>
57 </li>
58 <li class="item">
59 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
60 <div class="item-body-pic"><img src="default.png"></div>
61 <div class="item-body-info">
62 <span class="item-body-name">标题标题标题标题</span>
63 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
64 <span class="item-body-date">2015.12.01—2015.12.03</span>
65 </div>
66 </a>
67 <a class="item-del" href="javascript:;">删除</a>
68 </li>
69 <li class="item">
70 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
71 <div class="item-body-pic"><img src="default.png"></div>
72 <div class="item-body-info">
73 <span class="item-body-name">标题标题标题标题</span>
74 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
75 <span class="item-body-date">2015.12.01—2015.12.03</span>
76 </div>
77 </a>
78 <a class="item-del" href="javascript:;">删除</a>
79 </li>
80 <li class="item">
81 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
82 <div class="item-body-pic"><img src="default.png"></div>
83 <div class="item-body-info">
84 <span class="item-body-name">标题标题标题标题</span>
85 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
86 <span class="item-body-date">2015.12.01—2015.12.03</span>
87 </div>
88 </a>
89 <a class="item-del" href="javascript:;">删除</a>
90 </li>
91 <li class="item">
92 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
93 <div class="item-body-pic"><img src="default.png"></div>
94 <div class="item-body-info">
95 <span class="item-body-name">标题标题标题标题</span>
96 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
97 <span class="item-body-date">2015.12.01—2015.12.03</span>
98 </div>
99 </a>
100 <a class="item-del" href="javascript:;">删除</a>
101 </li>
102 <li class="item">
103 <a href="javascript:;" class="item-body" data-url="http://w3cboy.com">
104 <div class="item-body-pic"><img src="default.png"></div>
105 <div class="item-body-info">
106 <span class="item-body-name">标题标题标题标题</span>
107 <span class="item-body-detail">描述描述描述描述描述描述描述描述</span>
108 <span class="item-body-date">2015.12.01—2015.12.03</span>
109 </div>
110 </a>
111 <a class="item-del" href="javascript:;">删除</a>
112 </li>
113 </ul>
114 <script src="zepto.min.js"></script>
115 <script src="zepto.touch.js?"></script>
116 <script>
117 $(function () {
118 $('#j-list').on('swipeLeft', '.item-body', function (e) {
119 $(this).addClass('item-body-edit');
120 });
121 });
122 </script>
123 <!-- <script src="jquery.touchSwipe.js"></script>
124 <script>
125 $(function () {
126 $('#j-list a.item-body').swipe({
127 swipeLeft: function(event) {
128 console.log('ddd');
129 $(this).addClass('item-body-edit');
130 }
131 });
132 });
133 </script> -->
134</body>
135</html>