首页 > 代码库 > html5简单拖拽实现自动左右贴边+幸运大转盘
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能：
1、点击屏幕下方签到悬浮按钮；
2、弹出幸运大转盘，转盘抽奖签到
效果如图：
鉴于初入前端之路，方法有限，仅供参考。
在网上找了很多拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以自己稍微修改了一点。代码如下：
//签到按钮拖拽
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.pageX + ‘px‘;
dragBox.style.top = touch.pageY + ‘px‘;
}
}, false);
//拖拽结束，放手
dragBox.addEventListener(‘touchend‘, function(event) {
//event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
//拖拽结束，changedTouches列表是涉及当前事件的列表
if (event.changedTouches.length == 1) {
var touch = event.changedTouches[0];
// 判断手指位置，放置元素，如果大于浏览器宽度的一半，则右贴边，小于等于则左贴边
var halfWidth=window.innerWidth/2;
if(touch.pageX<=(halfWidth-$(dragBox).width()/2)){
dragBox.style.left = 20 + ‘px‘;
dragBox.style.top = touch.pageY + ‘px‘;
}else{
dragBox.style.left = (window.innerWidth-$(dragBox).width()-20) + ‘px‘;
dragBox.style.top = touch.pageY + ‘px‘;
}
}
}, false);签到转盘代码如下：
//如果未签到 或者 未登录 显示签到
if(IS_SIGN == 1 || UID == ‘‘ || UID == 0){
$("#signCorner").show();
}
//点击签到图标
$("#signCorner").click(function () {
if(UID == undefined || UID == 0 || UID == ""){
//未登录跳转登录页
window.location.href=http://www.mamicode.com/‘/index.php?app=wap&mod=Public&act=login‘;"#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=http://www.mamicode.com/‘/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触摸实例列表的。
本文出自 “小叙前端” 博客，请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1895499
html5简单拖拽实现自动左右贴边+幸运大转盘
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。