站長資訊網此篇文章主要實現兩個功能：
1、點擊屏幕下方簽到懸浮按鈕；
2、彈出幸運大轉盤，轉盤抽獎簽到
鑒于初入前端之路，方法有限，僅供參考。
在網上找了很多移動端拖拽的js實現方式，大部分都是這一種，html5的touch事件，但是沒找到點擊按鈕可以向兩邊貼邊的拖拽，所以匯總網上查閱到的相關資料自己稍微修改了一點。代碼如下：
$(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);
//簽到轉盤代碼如下： //如果未簽到 或者 未登錄 顯示簽到 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寬度獲取：
網頁可見區域寬：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節點目標。
$(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觸摸實例列表的。
