久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      html5簡單拖拽實現(xiàn)自動左右貼邊和幸運大轉盤的示例代碼

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

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

      2、彈出幸運大轉盤,轉盤抽獎簽到

      html5簡單拖拽實現(xiàn)自動左右貼邊和幸運大轉盤的示例代碼

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

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

      $(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中并沒有相應的參數(shù),所以當有參數(shù)時執(zhí)行,      // 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();//阻止其他事件      // 如果這個元素的位置內(nèi)只有一個手指的話      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) {      // 如果這個元素的位置內(nèi)只有一個手指的話      //拖拽結束,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('網(wǎng)絡超時,請檢查您的網(wǎng)絡設置!');                  }              });          };          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 == ""){                  //未登錄跳轉登錄頁                  // 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();                  }              });          });      });  });  })

      要點提要:

      常見js寬度獲?。?/p>

      網(wǎng)頁可見區(qū)域寬:document.body.clientWidth  網(wǎng)頁可見區(qū)域高:document.body.clientHeight  網(wǎng)頁可見區(qū)域寬:document.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  你的屏幕設置是: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才可以獲取到寬度;寬和高是寫在行內(nèi)中,比如style="width:120px;",這中情況通過上述2個方法都能拿到寬度。

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

      touch事件

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

      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事件中應該是只有個changedTouches觸摸實例列表的。

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號