Cet article implémente principalement deux fonctions :
1. Cliquez sur le bouton flottant de connexion en bas de l'écran
2. 🎜>Lucky Wheel, connexion à la loterie carrousel
js pour le glisser-déposer mobile sur Internet. La plupart d'entre elles sont de ce genre, le contact de html5. event , mais je n'ai pas trouvé de bouton de clic pour faire glisser des deux côtés, j'ai donc compilé les informations pertinentes que j'ai trouvées en ligne et les ai légèrement modifiées. Le code est le suivant :
$(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();
}
});
});
});
});
})网页可见区域宽：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（在元素的包含元素含滚动条的情况下）
Élément HTML Largeur et hauteur :
1, #div1.style.width 2, #div1.offsetWidth La largeur et la hauteur sont écrites dans le feuille de style, telle que #div1{width :120px;}. Dans ce cas, la largeur ne peut pas être obtenue via #div1.style.width, mais la largeur peut être obtenue via #div1.offsetWidth ; la largeur et la hauteur sont écrites en ligne, comme style="width:120px;", dans ce cas. Dans ce cas, la largeur peut être obtenue via #div1.offsetWidth. Les deux méthodes ci-dessus peuvent obtenir la largeur. Résumé, car id.offsetWidth et id.offsetHeight, que le style soit écrit dans la feuille de style ou en ligne, il est préférable d'utiliser ces deux événement tactileévénement tactile1 . Touchstart : L'élément est déclenché lorsque le doigt est simplement posé sur un élément DOM sur l'écran 2. Touchmove : Déclenché en continu lorsque le doigt est proche de l'écran 3. Touchend : Le le doigt est déplacé de l'écran Déclenché lorsqu'il est soulevé se déclenche sur PC comme les trois événements suivants : 1.mouseup2.mousemove (une fois)3. Ces événements mousedown bouillonneront le long de l'arborescence DOM et généreront un événement tactileobjet .
Touches : représente une liste de tous les mouvements des doigts actuellement sur l'écran. C'est un objet de type TouchList. TouchList est un objet de classe targetTouches : Tableau d'objets Touch spécifiques aux cibles d'événement. changeTouches : un tableau d'objets Touch indiquant ce qui a changé depuis le dernier contact. Chaque objet Touch contient les propriétés suivantes. clientX : La coordonnée x de la cible tactile dans la fenêtre. clientY : La coordonnée y de la cible tactile dans la fenêtre. identifiant : un identifiant unique qui identifie le toucher. pageX : La coordonnée x de la cible tactile dans la page. (La position du point tactile par rapport à la page) pageY : La coordonnée y de la cible tactile dans la page. screenX : La coordonnée x de la cible tactile sur l'écran. screenY : La coordonnée y de la cible tactile sur l'écran. cible : la cible dunœud DOM frappant.
$(document).bind(touchEvents.touchstart, function (event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchmove, function (event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchend, function (event) {
event.preventDefault();
});Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
L'ordinateur dispose d'Internet mais le navigateur ne peut pas ouvrir la page Web
arithmétique binaire
Que faire si la température du processeur est trop élevée
Comment résoudre 400mauvaises requêtes
Trouver des fichiers rapidement
puce FAI
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
