此篇文章主要实现两个功能：
1、点击屏幕下方签到悬浮按钮；
2、弹出幸运大转盘，转盘抽奖签到
效果如图：
鉴于初入前端之路，方法有限，仅供参考。
在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下：
|
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
|
$(
function
(){
//签到按钮拖拽
//首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变
function
setCookie(name,value,expires){
var
oDate=
new
Date();
oDate.setDate(oDate.getDate()+expires);
document.cookie=name+
'='
+value+
';expires='
+oDate;
}
function
getCookie(name){
var
arr=
new
Array();
arr=document.cookie.split(
"; "
);
var
i=0;
for
(i=0; i<arr.length;i++){
arr2=arr[i].split(
"="
);
if
(arr2[0]==name)
{
return
arr2[1];
}
}
return
''
;
}
function
removeCookie(name){
setCookie(name,
'随便什么值，反正都要被删除了'
,-1);
}
//判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，
// a和b只需要判断一个就好了
var
oDiv=document.getElementById(
'signCorner'
);
var
a=getCookie(
'xPosition'
);
var
b=getCookie(
'yPosition'
);
if
(a){
oDiv.style.left=a+
'px'
;
oDiv.style.top=b+
'px'
;
}
var
dragBox = document.getElementById(
'signCorner'
);
//拖拽中
dragBox.addEventListener(
'touchmove'
,
function
(event) {
event.preventDefault();
//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if
(event.targetTouches.length == 1) {
var
touch = event.targetTouches[0];
// 元素与手指位置同步
dragBox.style.left = touch.clientX +
'px'
;
dragBox.style.top = touch.clientY +
'px'
;
//由于页面中会有滚动，所以在这不能用pageX和pageY,要用clientX clientY
}
},
false
);
//拖拽结束，放手
dragBox.addEventListener(
'touchend'
,
function
(event) {
// 如果这个元素的位置内只有一个手指的话
//拖拽结束，changedTouches列表是涉及当前事件的列表
if
(event.changedTouches.length == 1) {
var
touch = event.changedTouches[0];
// 判断手指位置，放置元素，如果大于浏览器宽度的一半，则右贴边，小于等于则左贴边
var
halfViewWidth=window.innerWidth/2;
var
halfWidth=$(dragBox).width()/2;
// 手指位置判断,竖直方向，超出屏幕的贴边，水平方向，超出屏幕贴边，
//左边左贴边，右边右贴边
if
((touch.clientX<0)||(touch.clientX>=0&&touch.clientX<=(halfViewWidth-halfWidth))){
dragBox.style.left = 20 +
'px'
;
}
else
if
(touch.clientX>=(halfViewWidth-halfWidth)){
dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) +
'px'
;
}
if
(touch.clientY<0){
dragBox.style.top = 20 +
'px'
;
}
else
if
(touch.clientY>=window.innerHeight-$(dragBox).height()){
dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) +
'px'
;
}
}
dragBox.touchmove=
null
;
dragBox.touchend=
null
;
setCookie(
'xPosition'
,oDiv.offsetLeft,1);
setCookie(
'yPosition'
,oDiv.offsetTop,1);
},
false
);
|
|
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
//签到转盘代码如下：
//如果未签到 或者 未登录 显示签到
if
(IS_SIGN == 1 || UID ==
''
|| UID == 0){
$(
"#signCorner"
).show();
}
//点击签到图标
$(
"#signCorner"
).click(
function
() {
if
(UID == undefined || UID == 0 || UID ==
""
){
//未登录跳转登录页
window.location.href=
'/index.php?app=wap&mod=Public&act=login'
;
return
false
;
}
else
{
$(
"#signCorner"
).hide();
$(
"#signInDrawStart"
).show();
$(
"#mask"
).show();
}
});
//点击X关闭
$(
".signInDraw-close"
).click(
function
() {
$(
this
).parent(
".signInDraw-turntablebg"
).hide();
$(
"#mask"
).hide();
location.reload();
});
//点击遮罩关闭
/*$("#mask").click(function(){
$(".signInDraw-turntablebg").hide();
$("#mask").hide();
location.reload();
});*/
//大弹窗转盘
$(
function
(){
var
rotateTimeOut =
function
(){
$(
'#rotate'
).rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:
function
(){
alert(
'网络超时，请检查您的网络设置！'
);
}
});
};
var
bRotate =
false
;
var
rotateFn =
function
(awards, angles, txt){
bRotate = !bRotate;
$(
'#rotate'
).stopRotate();
$(
'#rotate'
).rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:
function
(){
$.post(U(
'activity/Activity/queUserSign'
),{uid:awards.uid},
function
(result){
var
results = eval(
'('
+result+
')'
);
var
attrs =
''
;
var
succession_sign = results.data.succession_sign;
if
(succession_sign == 0){
succession_sign = 7;
}
else
{
var
endsuc = 7 - succession_sign;
}
if
(results.status == 1)
{
if
(awards.name ==
"积分"
){
$(
".signInDraw-Congratulate"
).html(txt);
$(
'#kaquan'
).hide();
$(
'#hongbao'
).hide();
}
else
if
(awards.name ==
"现金红包"
){
$(
".signInDraw-Congratulate"
).html(txt);
$(
'#jifen'
).hide();
$(
'#kaquan'
).hide();
}
else
{
$(
".signInDraw-Congratulate"
).html(txt);
$(
'#jifen'
).hide();
$(
'#hongbao'
).hide();
}
if
(succession_sign == 7){
$(
'#signInDraw-tips1'
).show();
$(
'#signInDraw-tips'
).hide();
}
else
{
$(
'#signInDraw-tips1'
).hide();
$(
"#sSuc"
).html(succession_sign);
$(
"#endSuc"
).html(endsuc);
}
$(
'#signInDrawLast'
).show();
}
else
{
$(
".signInDrawLast"
).hide();
}
});
bRotate = !bRotate;
}
})
};
$(
'#signInDraw-pointer'
).click(
function
(){
if
(bRotate)
return
;
if
(UID == undefined || UID == 0 || UID ==
""
){
//未登录跳转登录页
// var url = "<?php echo base64_encode(U('public/Finance/index'));?>";
setTimeout(
function
() {window.location.href=
'/index.php?app=wap&mod=Public&act=login'
;},
"0"
);
return
false
;
}
var
attrs =
''
;
$.post(U(
'activity/Activity/signInActivity'
),{uid:UID},
function
(result){
var
results = eval(
'('
+result+
')'
);
if
(results.status == 1)
{
//奖品id，需指定
switch
(results.data.id) {
//普通奖励
case
0:
rotateFn(results.data, 67, results.info.title);
break
;
case
109:
rotateFn(results.data, 220, results.info.title);
break
;
case
110:
rotateFn(results.data, 220, results.info.title);
break
;
case
43:
rotateFn(results.data, 139, results.info.title);
break
;
case
26:
rotateFn(results.data, 139, results.info.title);
break
;
//宝箱奖励
//积分
case
1:
rotateFn(results.data, 280, results.info.title);
break
;
case
114:
rotateFn(results.data, 280, results.info.title);
break
;
case
89:
rotateFn(results.data, 280, results.info.title);
break
;
case
115:
rotateFn(results.data, 280, results.info.title);
break
;
case
6:
rotateFn(results.data, 280, results.info.title);
break
;
case
66:
rotateFn(results.data, 280, results.info.title);
break
;
case
109:
rotateFn(results.data, 280, results.info.title);
break
;
case
109:
rotateFn(results.data, 280, results.info.title);
break
;
case
109:
rotateFn(results.data, 280, results.info.title);
break
;
}
}
else
{
$(
"#headerSignPopUp"
).show();
location.reload();
}
});
});
});
});
})
|
要点提要：
常见js宽度获取：
|
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
|
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth （包括边线和滚动条的宽）
网页可见区域高：document.body.offsetHeight（包括边线的宽）
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高(ff)：document.body.scrollTop
网页被卷去的高(ie)：document.documentElement.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
你的屏幕设置是：window.screen.colorDepth 位彩色
你的屏幕设置：window.screen.deviceXDPI 像素/英寸
window的页面可视部分实际高度(ff)：window.innerHeight
//常用
window的页面可视部分实际高度(ff)：window.innerWidth
//常用
某个元素的宽度：obj.offsetWidth
//常用
某个元素的高度：obj.offsetHeight
//常用
某个元素的上边界到body最顶部的距离：obj.offsetTop（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offsetLeft（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）
|
js获取Html元素的实际宽度高度：
1、#div1.style.width
2、#div1.offsetWidth
宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度；宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。
小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
touch事件
touch事件模型现阶段规定了很多种类型的触摸事件，以下三种是应用最广泛的：
1. Touchstart：手指刚放到屏幕上某个DOM元素里的时候该元素触发
2. Touchmove：手指紧贴屏幕的时候连续触发
3. Touchend：手指从屏幕上抬起的时候触发
在PC触发为以下三个事件：
1.mouseup
2.mousemove(一次)
3.mousedown
这些个事件都会顺着DOM树向上冒泡，并产生一个触摸事件对象。
Touches：表示当前位于屏幕上的所有手指动作的列表，是一个TouchList类型的对象，TouchList是一个类数组对象，它里面装的是Touch对象。表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。(触摸点相对于页面的位置)
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
|
1
2
3
4
5
6
7
8
9
|
$(document).bind(touchEvents.touchstart,
function
(event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchmove,
function
(event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchend,
function
(event) {
event.preventDefault();
});
|
touches是在屏幕上的所有手指列表，targetTouches是当前DOM上的手指列表，所以当手指移开触发touchend事件时，event.originalEvent是没有这个targetTouches列表的，而changedTouches列表是涉及当前事件的列表，例如touchend事件中，手指移开。touchend事件中应该是只有个changedTouches触摸实例列表的。
本文转自 蓓蕾心晴 51CTO博客，原文链接：http://blog.51cto.com/beileixinqing/1895499，如需转载请自行联系原作者
