html5简单拖拽实现自动左右贴边+幸运大转盘
发表于：2024-11-23 作者：热门IT资讯网编辑
编辑最后更新 2024年11月23日，此篇文章主要实现两个功能：1、点击屏幕下方签到悬浮按钮；2、弹出幸运大转盘，转盘抽奖签到效果如图：鉴于初入前端之路，方法有限，仅供参考。在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，htm
此篇文章主要实现两个功能：
1、点击屏幕下方签到悬浮按钮；
2、弹出幸运大转盘，转盘抽奖签到
效果如图：
鉴于初入前端之路，方法有限，仅供参考。
在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下：
$(function(){//签到按钮拖拽//首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变function setCookie(name,value,expires){ var oDate=new Date(); oDate.setDate(oDate.getDate()+expires); [xss_clean]=name+'='+value+';expires='+oDate; } function getCookie(name){ var arr=new Array(); arr=[xss_clean].split("; "); var i=0; for(i=0; i=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 = ""; 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才可以获取到宽度；宽和高是写在行内中，比如，这中情况通过上述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触摸实例列表的。
参考链接：http://www.qdfuns.com/notes/16601/6fa9adfd052a736092959cdff3d0dd1c.html