此篇文章主要實現兩個功能：
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觸摸實例列表的。