recherche

Maison >interface Web >Tutoriel H5 >HTML5 simple glisser-déposer pour obtenir un passepoil automatique gauche et droit et un exemple de code de roue porte-bonheur

HTML5 simple glisser-déposer pour obtenir un passepoil automatique gauche et droit et un exemple de code de roue porte-bonheur

黄舟
黄舟original
2017-03-31 11:58:452309parcourir

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

HTML5 simple glisser-déposer pour obtenir un passepoil automatique gauche et droit et un exemple de code de roue porte-bonheur

Puisque vous êtes nouveau sur le front-end, les méthodes sont limitées et sont données à titre de référence uniquement.

J'ai trouvé beaucoup de méthodes d'implémentation de

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 &#39;&#39;;
    }
    function removeCookie(name){
        setCookie(name,&#39;随便什么值，反正都要被删除了&#39;,-1);
    }
    //判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，
    // a和b只需要判断一个就好了
    var oDiv=document.getElementById(&#39;signCorner&#39;);
 
    var a=getCookie(&#39;xPosition&#39;);
    var b=getCookie(&#39;yPosition&#39;);
    if(a){
        oDiv.style.left=a+&#39;px&#39;;
        oDiv.style.top=b+&#39;px&#39;;
    }
     
var dragBox = document.getElementById(&#39;signCorner&#39;);
 
//拖拽中
dragBox.addEventListener(&#39;touchmove&#39;, function(event) {
    event.preventDefault();//阻止其他事件
    // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
        var touch = event.targetTouches[0];
        // 元素与手指位置同步
        dragBox.style.left = touch.clientX + &#39;px&#39;;
        dragBox.style.top = touch.clientY + &#39;px&#39;;
        //由于页面中会有滚动，所以在这不能用pageX和pageY,要用clientX  clientY
 
    }
}, false);
 
//拖拽结束，放手
dragBox.addEventListener(&#39;touchend&#39;,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 + &#39;px&#39;;
        }else if(touch.clientX>=(halfViewWidth-halfWidth)){
            dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + &#39;px&#39;;
        }
        if(touch.clientY<0){
            dragBox.style.top = 20 + &#39;px&#39;;
        }else if(touch.clientY>=window.innerHeight-$(dragBox).height()){
            dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) + &#39;px&#39;;
        }
    }
    dragBox.touchmove=null;
    dragBox.touchend=null;
    setCookie(&#39;xPosition&#39;,oDiv.offsetLeft,1);
    setCookie(&#39;yPosition&#39;,oDiv.offsetTop,1);
},false);
//签到转盘代码如下：
//如果未签到 或者 未登录 显示签到
if(IS_SIGN == 1 || UID == &#39;&#39; || UID == 0){
    $("#signCorner").show();
}
 
//点击签到图标
    $("#signCorner").click(function () {
        if(UID == undefined || UID == 0 || UID == ""){
            //未登录跳转登录页
            window.location.href=&#39;/index.php?app=wap&mod=Public&act=login&#39;;
            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 (){
            $(&#39;#rotate&#39;).rotate({
                angle:0,
                animateTo:2160,
                duration:8000,
                callback:function (){
                    alert(&#39;网络超时，请检查您的网络设置！&#39;);
                }
            });
        };
        var bRotate = false;
        var rotateFn = function (awards, angles, txt){
            bRotate = !bRotate;
            $(&#39;#rotate&#39;).stopRotate();
            $(&#39;#rotate&#39;).rotate({
                angle:0,
                animateTo:angles+1800,
                duration:8000,
                callback:function (){
                    $.post(U(&#39;activity/Activity/queUserSign&#39;),{uid:awards.uid},function(result){
                        var results = eval(&#39;(&#39;+result+&#39;)&#39;);
                        var attrs   = &#39;&#39;;
                        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);
                                $(&#39;#kaquan&#39;).hide();
                                $(&#39;#hongbao&#39;).hide();
                            }else if(awards.name == "现金红包"){
                                $(".signInDraw-Congratulate").html(txt);
                                $(&#39;#jifen&#39;).hide();
                                $(&#39;#kaquan&#39;).hide();
                            }else{
                                $(".signInDraw-Congratulate").html(txt);
                                $(&#39;#jifen&#39;).hide();
                                $(&#39;#hongbao&#39;).hide();
                            }
                            if(succession_sign == 7){
                                $(&#39;#signInDraw-tips1&#39;).show();
                                $(&#39;#signInDraw-tips&#39;).hide();
                            }else{
                                $(&#39;#signInDraw-tips1&#39;).hide();
                                $("#sSuc").html(succession_sign);
                                $("#endSuc").html(endsuc);
                            }
                            $(&#39;#signInDrawLast&#39;).show();
                        }else {
                            $(".signInDrawLast").hide();
                        }
                    });
                    bRotate = !bRotate;
                }
            })
        };
 
        $(&#39;#signInDraw-pointer&#39;).click(function (){
            if(bRotate)return;
            if(UID == undefined || UID == 0 || UID == ""){
                //未登录跳转登录页
                // var url = "<?php echo base64_encode(U(&#39;public/Finance/index&#39;));?>";
                setTimeout(function () {window.location.href=&#39;/index.php?app=wap&mod=Public&act=login&#39;;}, "0");
                return false;
            }
            var attrs = &#39;&#39;;
            $.post(U(&#39;activity/Activity/signInActivity&#39;),{uid:UID},function(result){
                var results = eval(&#39;(&#39;+result+&#39;)&#39;);
                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();
                }
            });
        });
    });
});
})
Points clés :

Acquisition de largeur js commune : 

网页可见区域宽：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（在元素的包含元素含滚动条的情况下）
acquisition js de la valeur réelle de

É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

attributs lorsque nous obtenons la largeur et hauteur de l'élément. Notez que si les attributs ne sont pas écrits dans le style en ligne, ils ne peuvent pas être obtenus via id.style.atrr.

événement tactile

événement tactile

ModèleActuellement, de nombreux types d'événements tactiles sont spécifiés. Les trois suivants sont les plus largement utilisés :

1 . 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.mouseup

2.mousemove (une fois)

3. Ces événements mousedown

bouillonneront le long de l'arborescence DOM et généreront un événement tactile

objet .

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

tableau, qui contient des objets Touch. Un tableau d’objets tactiles représentant les opérations tactiles actuellement suivies.

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 du

nœ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();
});
touches est une liste de tous les doigts sur l'écran, targetTouches est une liste de doigts sur le DOM actuel, donc lorsque le doigt s'éloigne pour déclencher l'événement touchend, event.originalEvent n'a pas cela liste targetTouches et changesTouches Une liste est une liste qui fait référence à l'événement en cours, tel que l'événement touchend lorsque le doigt est retiré. Il ne devrait y avoir qu'une liste d'instances tactiles changesTouches dans l'événement touchend.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage d'exemples de code d'utilisation d'indexdb en HTML5 (images et texte)Article suivant：Partage d'exemples de code d'utilisation d'indexdb en HTML5 (images et texte)

Articles Liés

Voir plus