此篇文章主要实现两个功能:
1、点击屏幕下方签到悬浮按钮;
2、弹出幸运大转盘,转盘抽奖签到
效果如图:
在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是没找到点击按钮可以向两边贴边的拖拽,所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下:
1 $(function(){
2
3 //签到按钮拖拽
4 //首先,设置cookie值,使到不同的页面刷新拖拽的按钮位置不会变
5 function setCookie(name,value,expires){
6 var oDate=new Date();
7 oDate.setDate(oDate.getDate()+expires);
8 document.cookie=name+'='+value+';expires='+oDate;
9 }
10 function getCookie(name){
11 var arr=new Array();
12 arr=document.cookie.split("; ");
13 var i=0;
14 for(i=0; i<arr.length;i++){
15 arr2=arr[i].split("=");
16 if(arr2[0]==name)
17 {
18 return arr2[1];
19 }
20 }
21 return '';
22 }
23 function removeCookie(name){
24 setCookie(name,'随便什么值,反正都要被删除了',-1);
25 }
26 //判断a和b的原因是第一次打开,cookie中并没有相应的参数,所以当有参数时执行,
27 // a和b只需要判断一个就好了
28 var oDiv=document.getElementById('signCorner');
29
30 var a=getCookie('xPosition');
31 var b=getCookie('yPosition');
32 if(a){
33 oDiv.style.left=a+'px';
34 oDiv.style.top=b+'px';
35 }
36
37 var dragBox = document.getElementById('signCorner');
38
39 //拖拽中
40 dragBox.addEventListener('touchmove', function(event) {
41 event.preventDefault();//阻止其他事件
42 // 如果这个元素的位置内只有一个手指的话
43 if (event.targetTouches.length == 1) {
44 var touch = event.targetTouches[0];
45 // 元素与手指位置同步
46 dragBox.style.left = touch.clientX + 'px';
47 dragBox.style.top = touch.clientY + 'px';
48 //由于页面中会有滚动,所以在这不能用pageX和pageY,要用clientX clientY
49
50 }
51 }, false);
52
53 //拖拽结束,放手
54 dragBox.addEventListener('touchend',function(event) {
55 // 如果这个元素的位置内只有一个手指的话
56 //拖拽结束,changedTouches列表是涉及当前事件的列表
57 if (event.changedTouches.length == 1) {
58 var touch = event.changedTouches[0];
59 // 判断手指位置,放置元素,如果大于浏览器宽度的一半,则右贴边,小于等于则左贴边
60 var halfViewWidth=window.innerWidth/2;
61 var halfWidth=$(dragBox).width()/2;
62 // 手指位置判断,竖直方向,超出屏幕的贴边,水平方向,超出屏幕贴边,
63 //左边左贴边,右边右贴边
64 if((touch.clientX<0)||(touch.clientX>=0&&touch.clientX<=(halfViewWidth-halfWidth))){
65 dragBox.style.left = 20 + 'px';
66 }else if(touch.clientX>=(halfViewWidth-halfWidth)){
67 dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + 'px';
68 }
69 if(touch.clientY<0){
70 dragBox.style.top = 20 + 'px';
71 }else if(touch.clientY>=window.innerHeight-$(dragBox).height()){
72 dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) + 'px';
73 }
74 }
75 dragBox.touchmove=null;
76 dragBox.touchend=null;
77 setCookie('xPosition',oDiv.offsetLeft,1);
78 setCookie('yPosition',oDiv.offsetTop,1);
79 },false);
签到转盘代码如下:
1 //如果未签到 或者 未登录 显示签到
2 if(IS_SIGN == 1 || UID == '' || UID == 0){
3 $("#signCorner").show();
4 }
5
6 //点击签到图标
7 $("#signCorner").click(function () {
8 if(UID == undefined || UID == 0 || UID == ""){
9 //未登录跳转登录页
10 window.location.href='/index.php?app=wap&mod=Public&act=login';
11 return false;
12 }else{
13 $("#signCorner").hide();
14 $("#signInDrawStart").show();
15 $("#mask").show();
16 }
17 });
18 //点击X关闭
19 $(".signInDraw-close").click(function () {
20 $(this).parent(".signInDraw-turntablebg").hide();
21 $("#mask").hide();
22 location.reload();
23 });
24 //点击遮罩关闭
25 /*$("#mask").click(function(){
26 $(".signInDraw-turntablebg").hide();
27 $("#mask").hide();
28 location.reload();
29 });*/
30 //大弹窗转盘
31 $(function (){
32 var rotateTimeOut = function (){
33 $('#rotate').rotate({
34 angle:0,
35 animateTo:2160,
36 duration:8000,
37 callback:function (){
38 alert('网络超时,请检查您的网络设置!');
39 }
40 });
41 };
42 var bRotate = false;
43 var rotateFn = function (awards, angles, txt){
44 bRotate = !bRotate;
45 $('#rotate').stopRotate();
46 $('#rotate').rotate({
47 angle:0,
48 animateTo:angles+1800,
49 duration:8000,
50 callback:function (){
51 $.post(U('activity/Activity/queUserSign'),{uid:awards.uid},function(result){
52 var results = eval('('+result+')');
53 var attrs = '';
54 var succession_sign = results.data.succession_sign;
55 if(succession_sign == 0){
56 succession_sign = 7;
57 }else{
58 var endsuc = 7 - succession_sign;
59 }
60 if (results.status == 1)
61 {
62 if(awards.name == "积分"){
63 $(".signInDraw-Congratulate").html(txt);
64 $('#kaquan').hide();
65 $('#hongbao').hide();
66 }else if(awards.name == "现金红包"){
67 $(".signInDraw-Congratulate").html(txt);
68 $('#jifen').hide();
69 $('#kaquan').hide();
70 }else{
71 $(".signInDraw-Congratulate").html(txt);
72 $('#jifen').hide();
73 $('#hongbao').hide();
74 }
75 if(succession_sign == 7){
76 $('#signInDraw-tips1').show();
77 $('#signInDraw-tips').hide();
78 }else{
79 $('#signInDraw-tips1').hide();
80 $("#sSuc").html(succession_sign);
81 $("#endSuc").html(endsuc);
82 }
83 $('#signInDrawLast').show();
84 }else {
85 $(".signInDrawLast").hide();
86 }
87 });
88 bRotate = !bRotate;
89 }
90 })
91 };
92
93 $('#signInDraw-pointer').click(function (){
94 if(bRotate)return;
95 if(UID == undefined || UID == 0 || UID == ""){
96 //未登录跳转登录页
97 // var url = "<?php echo base64_encode(U('public/Finance/index'));?>";
98 setTimeout(function () {window.location.href='/index.php?app=wap&mod=Public&act=login';}, "0");
99 return false;
100 }
101 var attrs = '';
102 $.post(U('activity/Activity/signInActivity'),{uid:UID},function(result){
103 var results = eval('('+result+')');
104 if (results.status == 1)
105 {
106 //奖品id,需指定
107
108 switch (results.data.id) {
109 //普通奖励
110 case 0:
111 rotateFn(results.data, 67, results.info.title);
112 break;
113 case 109:
114 rotateFn(results.data, 220, results.info.title);
115 break;
116 case 110:
117 rotateFn(results.data, 220, results.info.title);
118 break;
119 case 43:
120 rotateFn(results.data, 139, results.info.title);
121 break;
122 case 26:
123 rotateFn(results.data, 139, results.info.title);
124 break;
125
126 //宝箱奖励
127 //积分
128 case 1:
129 rotateFn(results.data, 280, results.info.title);
130 break;
131 case 114:
132 rotateFn(results.data, 280, results.info.title);
133 break;
134 case 89:
135 rotateFn(results.data, 280, results.info.title);
136 break;
137 case 115:
138 rotateFn(results.data, 280, results.info.title);
139 break;
140 case 6:
141 rotateFn(results.data, 280, results.info.title);
142 break;
143 case 66:
144 rotateFn(results.data, 280, results.info.title);
145 break;
146 case 109:
147 rotateFn(results.data, 280, results.info.title);
148 break;
149 case 109:
150 rotateFn(results.data, 280, results.info.title);
151 break;
152 case 109:
153 rotateFn(results.data, 280, results.info.title);
154 break;
155 }
156 }else {
157 $("#headerSignPopUp").show();
158 location.reload();
159 }
160 });
161 });
162 });
163 });
要点提要:
常见js宽度获取:
1 网页可见区域宽:document.body.clientWidth
2 网页可见区域高:document.body.clientHeight
3 网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽)
4 网页可见区域高:document.body.offsetHeight(包括边线的宽)
5 网页正文全文宽:document.body.scrollWidth
6 网页正文全文高:document.body.scrollHeight
7 网页被卷去的高(ff):document.body.scrollTop
8 网页被卷去的高(ie):document.documentElement.scrollTop
9 网页被卷去的左:document.body.scrollLeft
10 网页正文部分上:window.screenTop
11 网页正文部分左:window.screenLeft
12 屏幕分辨率的高:window.screen.height
13 屏幕分辨率的宽:window.screen.width
14 屏幕可用工作区高度:window.screen.availHeight
15 屏幕可用工作区宽度:window.screen.availWidth
16 你的屏幕设置是:window.screen.colorDepth 位彩色
17 你的屏幕设置:window.screen.deviceXDPI 像素/英寸
18
19 window的页面可视部分实际高度(ff):window.innerHeight //常用
20 window的页面可视部分实际高度(ff):window.innerWidth //常用
21
22 某个元素的宽度:obj.offsetWidth //常用
23 某个元素的高度:obj.offsetHeight //常用
24
25 某个元素的上边界到body最顶部的距离:obj.offsetTop(在元素的包含元素不含滚动条的情况下)
26 某个元素的左边界到body最左边的距离:obj.offsetLeft(在元素的包含元素不含滚动条的情况下)
27 返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)
28 返回当前元素的左边界到它的包含元素的左边界的偏移量: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 $(document).bind(touchEvents.touchstart, function (event) {
2 event.preventDefault();
3 });
4 $(document).bind(touchEvents.touchmove, function (event) {
5 event.preventDefault();
6 });
7 $(document).bind(touchEvents.touchend, function (event) {
8 event.preventDefault();
9 });
touches是在屏幕上的所有手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是涉及当前事件的列表,例如touchend事件中,手指移开。touchend事件中应该是只有个changedTouches触摸实例列表的。