-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser_coll.html
139 lines (131 loc) · 4.44 KB
/
user_coll.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
<!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 class="lazyload" src="images/img1.png"><span class="fy-qf qf1">新房</span></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>5300元/m2</span><i class="zs1">在售</i></h4>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
<p class="mt2">[经开区]合肥翡翠路与云谷路交口西南角</p>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</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 class="lazyload" src="images/img1.png"><span class="fy-qf qf1">新房</span></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>5300元/m2</span><i class="zs1">在售</i></h4>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
<p class="mt2">[经开区]合肥翡翠路与云谷路交口西南角</p>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</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 class="lazyload" src="images/img1.png"><span class="fy-qf qf1">新房</span></div>
<div class="fy-r">
<h3>光明观澜印象</h3>
<h4><span>5300元/m2</span><i class="zs1">在售</i></h4>
<div class="fy-sq">
<span style="color:#62cc47; border-color:#62cc47">学区房</span>
<span style="color:#ff9934; border-color:#ff9934">地铁口</span>
</div>
<p class="mt2">[经开区]合肥翡翠路与云谷路交口西南角</p>
</div>
</div>
</a>
<div class="user-sc-t fl"><p>删除</p></div>
</div>
</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>