-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser_coll2.html
142 lines (134 loc) · 4.25 KB
/
user_coll2.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
<title>我的收藏-房源</title>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- header -->
<header class="per-head">
<a class="per-fh fh2" href=""></a>
<div class="map-menu">
<a class="active" href="">小区</a>
<a href="">房源</a>
</div>
</header>
<!-- /header -->
<!-- 收藏列表 -->
<section class="fy-list">
<div class="fy-con user-fy clearfix">
<div class="user-sc clearfix">
<a href="">
<div class="user-sc-i fl">
<div class="fy-l"><img src="images/img1.png"></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>120万</span><i class="c-333">3室2厅1室 85.4平米</i></h4>
<p class="c-666">万科森林公园</p>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</a>
</div>
<div class="fy-con user-fy clearfix">
<div class="user-sc clearfix">
<a href="">
<div class="user-sc-i fl">
<div class="fy-l"><img src="images/img1.png"></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>120万</span><i class="c-333">3室2厅1室 85.4平米</i></h4>
<p class="c-666">万科森林公园</p>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</a>
</div>
<div class="fy-con user-fy clearfix">
<div class="user-sc clearfix">
<a href="">
<div class="user-sc-i fl">
<div class="fy-l"><img src="images/img1.png"></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>120万</span><i class="c-333">3室2厅1室 85.4平米</i></h4>
<p class="c-666">万科森林公园</p>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</a>
</div>
</section>
<!-- /收藏列表 -->
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// 设定每一行的宽度=屏幕宽度+按钮宽度
$(".user-sc").width($(".fy-con").width() + $(".user-sc-t").width());
// 设定常规信息区域宽度=屏幕宽度
$(".user-sc-i").width($(".fy-con").width());
// 获取所有行，对每一行设置监听
var lines = $(".user-sc-i");
// 网页在移动端运行时的监听
for (var i = 0; i < lines.length; ++i) {
lines[i].addEventListener('touchstart', function(e){
var toucha = event.changedTouches[0];
startX = toucha.pageX;
startY = toucha.pageY;
});
lines[i].addEventListener('touchmove',function(e){
var touch = event.touches[0];
moveX = touch.pageX;
moveY = touch.pageY;
if (Math.abs(moveX-startX)>Math.abs(moveY-startY)) {
event.preventDefault();
};
});
lines[i].addEventListener('touchend', function(e){
var touch = event.changedTouches[0];
lastX = touch.pageX;
lastY = touch.pageY;
var diffX = lastX - startX;
if (diffX < -50) {
if ($(this).css('marginLeft')=="-60px") {
return;
}else{
console.log($(this).css('marginLeft'));
$(".user-sc-i").animate({marginLeft:"0px"}, 200);
$(this).animate({marginLeft:"-60px"}, 500);
};
} else if (diffX > 50) {
$(this).animate({marginLeft:"0px"}, 500);
}
});
}
$(".user-sc-t").click(function(event) {
alert("删除");
});
});
</script>
</body>
</html>