PHP 转盘滚动条,html5简单拖拽实现自动左右贴边和幸运大转盘的示例代码

最新推荐文章于 2021-09-16 21:13:50 发布

常晓锁

最新推荐文章于 2021-09-16 21:13:50 发布

阅读量269

点赞数

文章标签： PHP 转盘滚动条

本文详细介绍了如何使用JavaScript实现移动端的签到按钮拖拽功能，以及点击签到后弹出的幸运大转盘抽奖效果。通过touch事件监听手指滑动，动态调整按钮位置，并在拖拽结束时保存位置。同时，文章还展示了大转盘抽奖的逻辑，包括点击按钮启动旋转动画、根据旋转角度判断奖项，并更新用户状态。整个过程涉及前端交互设计和移动设备的触摸事件处理。

摘要由CSDN通过智能技术生成

此篇文章主要实现两个功能：

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

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: