真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

html5簡單拖拽實現(xiàn)自動左右貼邊+幸運大轉(zhuǎn)盤

此篇文章主要實現(xiàn)兩個功能：

我們提供的服務(wù)有：網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、蘭州ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的蘭州網(wǎng)站制作公司

1、點擊屏幕下方簽到懸浮按鈕；

2、彈出幸運大轉(zhuǎn)盤，轉(zhuǎn)盤抽獎簽到

效果如圖：

html5簡單拖拽實現(xiàn)自動左右貼邊+幸運大轉(zhuǎn)盤

html5簡單拖拽實現(xiàn)自動左右貼邊+幸運大轉(zhuǎn)盤

鑒于初入前端之路，方法有限，僅供參考。

在網(wǎng)上找了很多移動端拖拽的js實現(xiàn)方式，大部分都是這一種，html5的touch事件，但是沒找到點擊按鈕可以向兩邊貼邊的拖拽，所以匯總網(wǎng)上查閱到的相關(guān)資料自己稍微修改了一點。代碼如下：

$(function(){

//簽到按鈕拖拽
//首先，設(shè)置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=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);
//簽到轉(zhuǎn)盤代碼如下：
//如果未簽到 或者 未登錄 顯示簽到
if(IS_SIGN == 1 || UID == '' || UID == 0){
    $("#signCorner").show();
}

//點擊簽到圖標
    $("#signCorner").click(function () {
        if(UID == undefined || UID == 0 || UID == ""){
            //未登錄跳轉(zhuǎn)登錄頁
            window.location.href='/index.php?app=wap&mod=Public&act=login';
            return false;
        }else{
            $("#signCorner").hide();
            $("#signInDrawStart").show();
            $("#mask").show();
        }
    });
    //點擊X關(guān)閉
    $(".signInDraw-close").click(function () {
        $(this).parent(".signInDraw-turntablebg").hide();
        $("#mask").hide();
        location.reload();
    });
    //點擊遮罩關(guān)閉
    /*$("#mask").click(function(){
        $(".signInDraw-turntablebg").hide();
        $("#mask").hide();
        location.reload();
    });*/
    //大彈窗轉(zhuǎn)盤
    $(function (){
        var rotateTimeOut = function (){
            $('#rotate').rotate({
                angle:0,
                animateTo:2160,
                duration:8000,
                callback:function (){
                    alert('網(wǎng)絡(luò)超時，請檢查您的網(wǎng)絡(luò)設(shè)置！');
                }
            });
        };
        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 == "現(xiàn)金紅包"){
                                $(".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 == ""){
                //未登錄跳轉(zhuǎn)登錄頁
                // 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寬度獲?。?/p>

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth （包括邊線和滾動條的寬）
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight（包括邊線的寬）
網(wǎng)頁正文全文寬：document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
網(wǎng)頁被卷去的高(ff)：document.body.scrollTop
網(wǎng)頁被卷去的高(ie)：document.documentElement.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
你的屏幕設(shè)置是：window.screen.colorDepth  位彩色
你的屏幕設(shè)置：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才可以獲取到寬度；寬和高是寫在行內(nèi)中，比如，這中情況通過上述2個方法都能拿到寬度。

   小結(jié)，因為id.offsetWidth和id.offsetHeight無視樣式寫在樣式表還是行內(nèi)，所以我們獲取元素寬和高的時候最好用這2個屬性。注意如果不是寫在行內(nèi)style中的屬性都不能通過id.style.atrr來獲取。

touch事件

touch事件模型現(xiàn)階段規(guī)定了很多種類型的觸摸事件，以下三種是應(yīng)用最廣泛的：

1. Touchstart：手指剛放到屏幕上某個DOM元素里的時候該元素觸發(fā)

2. Touchmove：手指緊貼屏幕的時候連續(xù)觸發(fā)

3. Touchend：手指從屏幕上抬起的時候觸發(fā)

在PC觸發(fā)為以下三個事件：

1.mouseup

2.mousemove(一次)

3.mousedown

這些個事件都會順著DOM樹向上冒泡，并產(chǎn)生一個觸摸事件對象。

Touches：表示當前位于屏幕上的所有手指動作的列表，是一個TouchList類型的對象，TouchList是一個類數(shù)組對象，它里面裝的是Touch對象。表示當前跟蹤的觸摸操作的touch對象的數(shù)組。

targetTouches：特定于事件目標的Touch對象的數(shù)組。

changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

 

每個Touch對象包含的屬性如下。

 

clientX：觸摸目標在視口中的x坐標。

clientY：觸摸目標在視口中的y坐標。

identifier：標識觸摸的唯一ID。

pageX：觸摸目標在頁面中的x坐標。(觸摸點相對于頁面的位置)

pageY：觸摸目標在頁面中的y坐標。

screenX：觸摸目標在屏幕中的x坐標。

screenY：觸摸目標在屏幕中的y坐標。

target：觸目的DOM節(jié)點目標。

$(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上的手指列表，所以當手指移開觸發(fā)touchend事件時，event.originalEvent是沒有這個targetTouches列表的，而changedTouches列表是涉及當前事件的列表，例如touchend事件中，手指移開。touchend事件中應(yīng)該是只有個changedTouches觸摸實例列表的。

參考鏈接：http://www.qdfuns.com/notes/16601/6fa9adfd052a736092959cdff3d0dd1c.html


標題名稱：html5簡單拖拽實現(xiàn)自動左右貼邊+幸運大轉(zhuǎn)盤
路徑分享：http://weahome.cn/article/pehgeh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部