此篇文章主要实现两个功能：
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);
|