溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
此篇文章主要實(shí)現(xiàn)兩個(gè)功能：
1、點(diǎn)擊屏幕下方簽到懸浮按鈕；
2、彈出幸運(yùn)大轉(zhuǎn)盤(pán)，轉(zhuǎn)盤(pán)抽獎(jiǎng)簽到
效果如圖：
鑒于初入前端之路，方法有限，僅供參考。
在網(wǎng)上找了很多移動(dòng)端拖拽的js實(shí)現(xiàn)方式，大部分都是這一種，html5的touch事件，但是沒(méi)找到點(diǎn)擊按鈕可以向兩邊貼邊的拖拽，所以匯總網(wǎng)上查閱到的相關(guān)資料自己稍微修改了一點(diǎn)。代碼如下：
$(function(){
//簽到按鈕拖拽
//首先，設(shè)置cookie值，使到不同的頁(yè)面刷新拖拽的按鈕位置不會(huì)變
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的原因是第一次打開(kāi)，cookie中并沒(méi)有相應(yīng)的參數(shù)，所以當(dāng)有參數(shù)時(shí)執(zhí)行，
// a和b只需要判斷一個(gè)就好了
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();//阻止其他事件
// 如果這個(gè)元素的位置內(nèi)只有一個(gè)手指的話
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 元素與手指位置同步
dragBox.style.left = touch.clientX + 'px';
dragBox.style.top = touch.clientY + 'px';
//由于頁(yè)面中會(huì)有滾動(dòng)，所以在這不能用pageX和pageY,要用clientX clientY
}
}, false);
//拖拽結(jié)束，放手
dragBox.addEventListener('touchend',function(event) {
// 如果這個(gè)元素的位置內(nèi)只有一個(gè)手指的話
//拖拽結(jié)束，changedTouches列表是涉及當(dāng)前事件的列表
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);//簽到轉(zhuǎn)盤(pán)代碼如下：
//如果未簽到 或者 未登錄 顯示簽到
if(IS_SIGN == 1 || UID == '' || UID == 0){
$("#signCorner").show();
}
//點(diǎn)擊簽到圖標(biāo)
$("#signCorner").click(function () {
if(UID == undefined || UID == 0 || UID == ""){
//未登錄跳轉(zhuǎn)登錄頁(yè)
window.location.href='/index.php?app=wap&mod=Public&act=login';
return false;
}else{
$("#signCorner").hide();
$("#signInDrawStart").show();
$("#mask").show();
}
});
//點(diǎn)擊X關(guān)閉
$(".signInDraw-close").click(function () {
$(this).parent(".signInDraw-turntablebg").hide();
$("#mask").hide();
location.reload();
});
//點(diǎn)擊遮罩關(guān)閉
/*$("#mask").click(function(){
$(".signInDraw-turntablebg").hide();
$("#mask").hide();
location.reload();
});*/
//大彈窗轉(zhuǎn)盤(pán)
$(function (){
var rotateTimeOut = function (){
$('#rotate').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('網(wǎng)絡(luò)超時(shí)，請(qǐng)檢查您的網(wǎng)絡(luò)設(shè)置！');
}
});
};
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 == "現(xiàn)金紅包"){
$(".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 == ""){
//未登錄跳轉(zhuǎn)登錄頁(yè)
// 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)
{
//獎(jiǎng)品id，需指定
switch (results.data.id) {
//普通獎(jiǎng)勵(lì)
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;
//寶箱獎(jiǎng)勵(lì)
//積分
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();
}
});
});
});
});
})要點(diǎn)提要：
常見(jiàn)js寬度獲?。?br />
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.clientWidth 網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.clientHeight 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.offsetWidth （包括邊線和滾動(dòng)條的寬） 網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.offsetHeight（包括邊線的寬） 網(wǎng)頁(yè)正文全文寬：document.body.scrollWidth 網(wǎng)頁(yè)正文全文高：document.body.scrollHeight 網(wǎng)頁(yè)被卷去的高(ff)：document.body.scrollTop 網(wǎng)頁(yè)被卷去的高(ie)：document.documentElement.scrollTop 網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft 網(wǎng)頁(yè)正文部分上：window.screenTop 網(wǎng)頁(yè)正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的寬：window.screen.width 屏幕可用工作區(qū)高度：window.screen.availHeight 屏幕可用工作區(qū)寬度：window.screen.availWidth 你的屏幕設(shè)置是：window.screen.colorDepth 位彩色 你的屏幕設(shè)置：window.screen.deviceXDPI 像素/英寸 window的頁(yè)面可視部分實(shí)際高度(ff)：window.innerHeight //常用 window的頁(yè)面可視部分實(shí)際高度(ff)：window.innerWidth //常用 某個(gè)元素的寬度：obj.offsetWidth //常用 某個(gè)元素的高度：obj.offsetHeight //常用 某個(gè)元素的上邊界到body最頂部的距離：obj.offsetTop（在元素的包含元素不含滾動(dòng)條的情況下） 某個(gè)元素的左邊界到body最左邊的距離：obj.offsetLeft（在元素的包含元素不含滾動(dòng)條的情況下） 返回當(dāng)前元素的上邊界到它的包含元素的上邊界的偏移量：obj.offsetTop（在元素的包含元素含滾動(dòng)條的情況下） 返回當(dāng)前元素的左邊界到它的包含元素的左邊界的偏移量：obj.offsetLeft（在元素的包含元素含滾動(dòng)條的情況下）
1、#div1.style.width
2、#div1.offsetWidth
寬高都寫(xiě)在樣式表里，就比如#div1{width:120px;}。這中情況通過(guò)#div1.style.width拿不到寬度，而通過(guò)#div1.offsetWidth才可以獲取到寬度；寬和高是寫(xiě)在行內(nèi)中，比如，這中情況通過(guò)上述2個(gè)方法都能拿到寬度。
小結(jié)，因?yàn)閕d.offsetWidth和id.offsetHeight無(wú)視樣式寫(xiě)在樣式表還是行內(nèi)，所以我們獲取元素寬和高的時(shí)候最好用這2個(gè)屬性。注意如果不是寫(xiě)在行內(nèi)style中的屬性都不能通過(guò)id.style.atrr來(lái)獲取。
touch事件
touch事件模型現(xiàn)階段規(guī)定了很多種類型的觸摸事件，以下三種是應(yīng)用最廣泛的：
1. Touchstart：手指剛放到屏幕上某個(gè)DOM元素里的時(shí)候該元素觸發(fā)
2. Touchmove：手指緊貼屏幕的時(shí)候連續(xù)觸發(fā)
3. Touchend：手指從屏幕上抬起的時(shí)候觸發(fā)
在PC觸發(fā)為以下三個(gè)事件：
1.mouseup
2.mousemove(一次)
3.mousedown
這些個(gè)事件都會(huì)順著DOM樹(shù)向上冒泡，并產(chǎn)生一個(gè)觸摸事件對(duì)象。
Touches：表示當(dāng)前位于屏幕上的所有手指動(dòng)作的列表，是一個(gè)TouchList類型的對(duì)象，TouchList是一個(gè)類數(shù)組對(duì)象，它里面裝的是Touch對(duì)象。表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches：表示自上次觸摸以來(lái)發(fā)生了什么改變的Touch對(duì)象的數(shù)組。
每個(gè)Touch對(duì)象包含的屬性如下。
clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識(shí)觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。(觸摸點(diǎn)相對(duì)于頁(yè)面的位置)
pageY：觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：觸目的DOM節(jié)點(diǎn)目標(biāo)。
$(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是當(dāng)前DOM上的手指列表，所以當(dāng)手指移開(kāi)觸發(fā)touchend事件時(shí)，event.originalEvent是沒(méi)有這個(gè)targetTouches列表的，而changedTouches列表是涉及當(dāng)前事件的列表，例如touchend事件中，手指移開(kāi)。touchend事件中應(yīng)該是只有個(gè)changedTouches觸摸實(shí)例列表的。
參考鏈接：http://www.qdfuns.com/notes/16601/6fa9adfd052a736092959cdff3d0dd1c.html
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼