-
Notifications
You must be signed in to change notification settings - Fork 0
/
test(1).html
121 lines (115 loc) · 5.11 KB
/
test(1).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>我的收藏</title>
</head>
<body >
<div class="w-320">
<div class="xm-header" style="z-index: 99999;">
<a href="my.html"><div class="xm-backtext fl" style="padding: 0px 12px;"><i class="xm-back"></i> </div></a>
我的收藏
<a href="setcollect.html"><div class="xm-backtext0 fr add-right">编辑</div></a>
</div>
<div class="w-100 mt10">
<div class="line-wrapper">
<div class="line-scroll-wrapper clear">
<div class="xm-add0 xm-browser-record fl">
<div class="xm-add0-l fl img">
<img src="img/1.png" />
</div>
<div class="xm-add0-r fl">
<a href="javascript:;"><p class="p0">健身&肌肉训练</p></a>
<p class="p1">日常进行时 工作生活两不耽误</p>
<p class="p2">¥ 1928</p>
</div>
</div>
<div class="xm-add-clear fl"><i></i></div>
</div>
</div>
<div class="line-wrapper clear">
<div class="line-scroll-wrapper">
<div class="xm-add0 xm-browser-record fl">
<div class="xm-add0-l fl img">
<img src="img/1.png" />
</div>
<div class="xm-add0-r fl">
<a href="javascript:;"><p class="p0">健身&肌肉训练</p></a>
<p class="p1">日常进行时 工作生活两不耽误</p>
<p class="p2">¥ 1928</p>
</div>
</div>
<div class="xm-add-clear fl"><i></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
// 设定每一行的宽度=屏幕宽度+按钮宽度
$(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".xm-add-clear").width()+20);
// 设定常规信息区域宽度=屏幕宽度
$(".xm-add0").width($(".line-wrapper").width());
// 设定文字部分宽度（为了实现文字过长时在末尾显示...）
// $(".xm-add0-r").width($(".xm-add0").width() -100);
// 获取所有行，对每一行设置监听
var lines = $(".xm-add0");
var len = lines.length;
var lastX, lastXForMobile;
// 用于记录被按下的对象
var pressedObj; // 当前左滑的对象
var lastLeftObj; // 上一个左滑的对象
// 用于记录按下的点
var start;
// 网页在移动端运行时的监听
for (var i = 0; i < len; ++i) {
lines[i].addEventListener('touchstart', function(e){
lastXForMobile = e.changedTouches[0].pageX;
pressedObj = this; // 记录被按下的对象
// 记录开始按下时的点
var touches = event.touches[0];
start = {
x: touches.pageX, // 横坐标
y: touches.pageY // 纵坐标
};
});
lines[i].addEventListener('touchmove',function(e){
// 计算划动过程中x和y的变化量
var touches = event.touches[0];
delta = {
x: touches.pageX - start.x,
y: touches.pageY - start.y
};
// 横向位移大于纵向位移，阻止纵向滚动
if (Math.abs(delta.x) > Math.abs(delta.y)) {
event.preventDefault();
}
});
lines[i].addEventListener('touchend', function(e){
if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
$(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.changedTouches[0].pageX - lastXForMobile;
if (diffX < -150) {
$(pressedObj).animate({marginLeft:"-80px"}, 500); // 左滑
lastLeftObj && lastLeftObj != pressedObj &&
$(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if (diffX > 150) {
if (pressedObj == lastLeftObj) {
$(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
}
});
</script>
</body>
</html>