Skip to content

Commit c47ce01

Browse files
quanruquanru
committed
Js大部分兼容移动端
长按触发的touchstart与滚动触发的touchstart冲突尚未解决
1 parent d393667 commit c47ce01

31 files changed

+189
-133
lines changed

‎album.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h4>我的相册</h4>
2929
<div id="myAlbum">
3030
<div id="banner">
3131
<img id="bannerImg" src="./img/banner.jpg" alt="相册横幅">
32-
<div id="userBox">
32+
<div id="headBox">
3333
<img src="./img/aniang.jpg" alt="头像">
3434
<h5 class="person" id="userName">劝儒</h5>
3535
</div>

‎css/album.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@
1212
#banner{
1313
position: relative;
1414
}
15-
#userBox {
15+
#headBox {
1616
position: absolute;
1717
right: 20px;
1818
bottom: -30px;
1919
}
20-
#userBox img {
20+
#headBox img {
2121
width: 70px;
2222
height: 70px;
2323
border: 5px solid #F7F7F7;
2424
margin-left: 15px;
2525
}
26-
#userBox h5 {
26+
#headBox h5 {
2727
float: left;
2828
display: inline;
2929
line-height: 60px;

‎css/chatRoom.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
padding: 10px;
5454
}
5555
#biaoqing{
56-
padding: 15px 10px 0 0;
56+
padding: 15px 10px 1px 0;
5757
border-bottom: 2px solid #4f8643;
5858
float: right;
5959
}

‎css/friendCircle.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
#banner{
1818
position: relative;
1919
}
20-
#userBox {
20+
#headBox {
2121
position: absolute;
2222
right: 20px;
2323
bottom: -30px;
2424
}
25-
#userBox img {
25+
#headBox img {
2626
width: 70px;
2727
height: 70px;
2828
border: 5px solid #F7F7F7;
2929
margin-left: 15px;
3030
}
31-
#userBox h5 {
31+
#headBox h5 {
3232
float: left;
3333
display: inline;
3434
line-height: 60px;

‎css/person.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@
3636
}
3737
#personList h5 {
3838
font-size: 18px;
39-
text-indent: 20px;
39+
padding-left: 20px;
4040
}
4141
#personList h5 span {
4242
position: absolute;
43-
left: 100px;
43+
left: 120px;
4444
}
4545
#personAlbum {
4646
height: 100px;

‎css/personality.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
#personalityDetails h5 {
22
font-size: 18px;
3-
text-indent: 20px;
3+
padding-left: 20px;
44
}
5-
#personalityDetails h5 span {
5+
#personalityDetails span {
6+
height: 50px;
7+
display: block;
8+
line-height: 50px;
69
position: absolute;
710
right: 20px;
811
color: #A9A9A9;

‎css/phone.css

+58-19
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
摇一摇
7474
*/
7575
#botBar div {
76-
padding: 19px 30px;
76+
padding: 19px 7%;
7777
}
7878
#shakeBar {
7979
height: 80px;
@@ -147,7 +147,7 @@
147147
float: left;
148148
}
149149
}
150-
@media screen and (max-width: 320px) and (max-height: 600px){
150+
@media screen and (max-width: 320px) and (max-height: 750px){
151151
#bottomBar div {
152152
padding: 3px 6%;
153153
}
@@ -173,6 +173,9 @@
173173
#inputBar input{
174174
width: 50%;
175175
}
176+
#biaoqing{
177+
padding: 15px 10px 2px 0;
178+
}
176179
.user {
177180
height: 25px;
178181
}
@@ -223,7 +226,7 @@
223226
扫一扫
224227
*/
225228
#botBar div {
226-
padding: 19px 20px;
229+
padding: 19px 6%;
227230
}
228231
#scanFrame{
229232
margin-top: 20px;
@@ -287,34 +290,44 @@
287290
通讯录页面
288291
*/
289292
#a-z {
290-
font-size: 15px;
293+
font-size: 12px;
291294
}
292295
#a-z li {
293-
width: 15px;
294-
height: 15px;
296+
width: 12px;
297+
height: 12px;
295298
}
296299
/*
297300
发现与我页面的li样式
298301
*/
299302
.barCol {
300-
height: 40px;
303+
height: 30px;
301304
}
302305
.barCol img {
303306
width: 20px;
304307
height: 20px;
308+
padding: 5px 30px;
305309
}
306310
.barCol h5 {
307-
font-size: 15px;
308-
line-height: 40px;
309-
height: 40px;
311+
font-size: 10px;
312+
line-height: 30px;
313+
height: 30px;
314+
}
315+
#settingList h4 {
316+
font-size: 10px;
317+
line-height: 30px;
318+
height: 30px;
319+
padding: 0;
320+
}
321+
#settingList img {
322+
padding: 5px 0px;
310323
}
311324
/*
312325
间隙
313326
*/
314327
.gap {
315-
height: 15px;
316-
font-size: 15px;
317-
line-height: 15px;
328+
height: 10px;
329+
font-size: 10px;
330+
line-height: 10px;
318331
}
319332
/*
320333
个人资料页面
@@ -341,16 +354,22 @@
341354
#personalityDetails h5 {
342355
font-size: 15px;
343356
}
357+
#personalityDetails span {
358+
height: 30px;
359+
line-height: 30px;
360+
font-size: 15px;
361+
}
344362
#userName {
345-
height: 75px;
363+
height: 60px;
346364
}
347365
#userName h5 {
348-
line-height: 75px;
366+
line-height: 60px;
367+
height: 60px;
349368
}
350369
#userName img {
351-
width: 45px;
352-
height: 45px;
353-
padding: 15px;
370+
width: 40px;
371+
height: 40px;
372+
padding: 10px;
354373
}
355374
#twoDContact img {
356375
float: right;
@@ -432,5 +451,25 @@
432451
height: 45px;
433452
line-height: 45px;
434453
}
435-
454+
/*
455+
聊天列表页面
456+
*/
457+
#chatList li {
458+
height: 45px;
459+
}
460+
#chatList img {
461+
width: 48px;
462+
height: 48px;
463+
}
464+
h5.user {
465+
font-size: 15px;
466+
}
467+
p.date {
468+
font-size: 10px;
469+
margin: 0;
470+
}
471+
p.preview {
472+
font-size: 10px;
473+
top: -30px;
474+
}
436475
}

‎css/scan2D.css

+4
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,7 @@
5656
width: 100%;
5757
bottom: 100%;
5858
}
59+
#botBar img {
60+
width: 40px;
61+
height: 40px;
62+
}

‎css/setting.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
font-size: 18px;
33
text-indent: 20px;
44
}
5+
#settingList h4 {
6+
font-weight: normal;
7+
float: right;
8+
height: 50px;
9+
line-height: 50px;
10+
margin-right: 15px;
11+
}
512
.barCol img {
613
float: right;
7-
padding-top: 2px;
14+
padding: 13px 0;
815
}

‎css/share.css

+3-5
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,15 @@ toolBar字体样式以及各种按钮
8383
}
8484
#shade img {
8585
position: absolute;
86-
top: 150px;
86+
top: 20%;
8787
left: 0;
8888
}
8989
/*
9090
弹出阴影样式
9191
*/
9292
#popMenu {
9393
position: absolute;
94-
top: 250px;
94+
top: 30%;
9595
left: 14%;
9696
display: none;
9797
width: 73%;
@@ -150,10 +150,8 @@ toolBar字体样式以及各种按钮
150150
background: #fff;
151151
}
152152
.barCol img {
153-
position: relative;
154-
top: 10px;
155153
float: left;
156-
padding: 0 30px;
154+
padding: 10px 30px;
157155
}
158156
.barCol h5 {
159157
font-size: 20px;

‎friendCircle.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h4>朋友圈</h4>
3030
<div id="friendNews">
3131
<div id="banner">
3232
<img id="bannerImg" src="./img/banner.jpg" alt="朋友圈横幅">
33-
<div id="userBox">
33+
<div id="headBox">
3434
<img src="./img/aniang.jpg" alt="">
3535
<h5 class="person" id="userName">劝儒</h5>
3636
</div>

‎js/addFriends.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
$(function () {
2-
$("#toolBar").bind("mousedown", backgroundColor1);//点返回加与个人资料按钮后变色
3-
$("#toolBar").bind("mouseup", "#212A2A", backgroundColor2);
4-
$("#inputSearch").click(function () {
2+
$("#toolBar").bind("mousedown touchstart", backgroundColor1);//点返回加与个人资料按钮后变色
3+
$("#toolBar").bind("mouseup touchend", "#212A2A", backgroundColor2);
4+
$("#inputSearch").bind("click touchend", function () {//点击输入窗口，清空提示
55
this.value = "";
66
});
7-
$("#gobackBtn").bind("click", goBack);//返回按钮
7+
$("#gobackBtn").bind("click touchend", goBack);//返回按钮
88
});

‎js/album.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$(function(){
2-
$("#gobackBtn, #messageBtn").bind("mousedown", backgroundColor1);//点返回加与个人资料按钮后变色
3-
$("#gobackBtn, #messageBtn").bind("mouseup", "#212A2A", backgroundColor2);//还原颜色
4-
$("#gobackBtn").bind("click", goBack);//返回按钮
2+
$("#gobackBtn, #messageBtn").bind("mousedown touchstart", backgroundColor1);//点返回加与个人资料按钮后变色
3+
$("#gobackBtn, #messageBtn").bind("mouseup touchend", "#212A2A", backgroundColor2);//还原颜色
4+
$("#gobackBtn").bind("click touchend", goBack);//返回按钮
55
var isClick = false, //判断是否单击
66
isMove = false,//判断单击后是否移动
77
iY;//标记单击时鼠标纵坐标位置

‎js/cardBag.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
$(function () {
2-
$("#gobackBtn, #menuBtn, #slideMenu").bind("mousedown", backgroundColor1);//点返回加与个人资料按钮后变色
3-
$("#gobackBtn, #menuBtn, #slideMenu").bind("mouseup", "#212A2A", backgroundColor2);//还原颜色
4-
$("#gobackBtn").bind("click", goBack);//返回按钮
2+
$("#gobackBtn, #menuBtn, #slideMenu").bind("mousedown touchstart", backgroundColor1);//点返回加与个人资料按钮后变色
3+
$("#gobackBtn, #menuBtn, #slideMenu").bind("mouseup touchend", "#212A2A", backgroundColor2);//还原颜色
4+
$("#gobackBtn").bind("click touchend", goBack);//返回按钮
55
$("#menuBtn").bind("click", slideMenu);//点击右上角菜单
66
});

‎js/chatRoom.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
$(function () {
2-
$("#gobackBtn, #personBtn").bind("mousedown", backgroundColor1);//点返回加与个人资料按钮后变色
3-
$("#gobackBtn").bind("click", goBack);//返回按钮
2+
$("#gobackBtn, #personBtn").bind("mousedown touchstart", backgroundColor1);//点返回加与个人资料按钮后变色
3+
$("#gobackBtn").bind("click touchend", goBack);//返回按钮
44
var search = window.location.search.split('&'),
55
userName = decodeURIComponent(search[0].substring(10)),
66
imgSrc = decodeURIComponent(search[1].substring(8)),
77
wordsNum = 3;//聊天信息起始索引
88
$("#userName").html(userName);
9-
$("#personBtn").bind("click", function (event) {
9+
$("#personBtn").bind("click touchend", function (event) {
1010
var url = "person.html?userName=" + encodeURIComponent(userName) + "&imgSrc=" + encodeURIComponent('.' + imgSrc) ;
1111
window.location = url;
1212
});

‎js/collect.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
$(function () {
2-
$("#toolBar, #slideMenu").bind("mousedown", backgroundColor1);//点击添加与搜索按钮后变色
3-
$("#toolBar, #slideMenu").bind("mouseup", "#212A2A", backgroundColor2);//还原颜色
4-
$("#gobackBtn").bind("click", goBack);//返回按钮
5-
$("#searchBtn").bind("click", function () {//跳转到添加好友页面
2+
$("#toolBar, #slideMenu").bind("mousedown touchstart", backgroundColor1);//点击添加与搜索按钮后变色
3+
$("#toolBar, #slideMenu").bind("mouseup touchend", "#212A2A", backgroundColor2);//还原颜色
4+
$("#gobackBtn").bind("click touchend", goBack);//返回按钮
5+
$("#searchBtn").bind("click touchend", function () {//跳转到添加好友页面
66
window.location = "search.html";
77
});
88
$("#addBtn").bind("click", slideMenu); //点击右上角菜单

‎js/contacts.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
var srcEle;//保存被长按的元素
22
$(function () {
3-
$("#toolBar, #slideMenu").bind("mousedown", backgroundColor1);//点击添加与搜索按钮后变色
4-
$("#popMenu, #newFriends").bind("mousedown", "#D6D6D6", backgroundColor2);//点击变色
3+
$("#toolBar, #slideMenu").bind("mousedown touchstart", backgroundColor1);//点击添加与搜索按钮后变色
4+
$("#popMenu, #newFriends").bind("mousedown touchstart", "#D6D6D6", backgroundColor2);//点击变色
55
$("#toolBar, #slideMenu").bind("mouseup", "#212A2A", backgroundColor2);//颜色还原
66
$("#contactsList, #popMenu").bind("mouseup", "#fff", backgroundColor2);//颜色还原
77
$("#addBtn").bind("click", slideMenu); //点击右上角菜单
8-
$("#addFriends, #newFriends").bind("click", function () {//跳转到添加好友页面
8+
$("#addFriends, #newFriends").bind("click touchend", function () {//跳转到添加好友页面
99
window.location = "addFriends.html";
1010
});
11-
$("#searchBtn").bind("click", function () {//跳转到搜索页面
11+
$("#searchBtn").bind("click touchend", function () {//跳转到搜索页面
1212
window.location = "search.html";
1313
});
14-
$("#bottomBar").bind("click", bottomHref);//底栏导航
14+
$("#bottomBar").bind("click touchend", bottomHref);//底栏导航
1515
$("#contactsList").bind("mousedown touchstart", longClick);//长按列表弹出菜单
16-
$("#shade").bind("click", getOut);//点击背景退出菜单
16+
$("#shade").bind("click touchend", getOut);//点击背景退出菜单
1717
$("#contactsList").bind("click", enterPerson);//单击进入聊天窗口
1818
});

0 commit comments

Comments
 (0)