亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

移動(dòng)端腳本框架Hammer.js

 更新時(shí)間：2016年12月15日 09:36:07   作者：A_山水子農(nóng)  
這篇文章主要為大家詳細(xì)介紹了一款開(kāi)源的移動(dòng)端腳本框架Hammer.js,可以完美的實(shí)現(xiàn)在移端開(kāi)發(fā)的大多數(shù)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、前言

  移動(dòng)端框架當(dāng)前還處在初級(jí)階段，但相對(duì)于移動(dòng)端的應(yīng)用來(lái)說(shuō)已經(jīng)有很長(zhǎng)時(shí)間了。雖然暫時(shí)還沒(méi)有PC端開(kāi)發(fā)的需求量大，但移動(dòng)端的Web必然是一種趨勢(shì)，在接觸移動(dòng)端腳本的過(guò)程中，最開(kāi)始想到的是juqery。Jquery2.0版本及以上已經(jīng)開(kāi)始偏向移動(dòng)端，如對(duì)h5的支持，但支持還是不夠完善，希望jq在后面的版本能夠逐漸支持起來(lái)。

  最初在開(kāi)發(fā)移動(dòng)端Web的時(shí)候使用w3c標(biāo)準(zhǔn)的語(yǔ)法結(jié)構(gòu)和原生的js開(kāi)發(fā)，但相對(duì)來(lái)說(shuō)開(kāi)發(fā)量比較大，而且每一步都要考慮各移動(dòng)端瀏覽器的兼容，像比較讓程序員頭痛的大wp手機(jī)，很多事件都向w3c申請(qǐng)單獨(dú)的標(biāo)準(zhǔn)。因此一個(gè)好的兼容性架構(gòu)對(duì)于開(kāi)發(fā)者來(lái)說(shuō)可以節(jié)省很大一部分工作量。

  剛開(kāi)始接觸移動(dòng)端框架之初也問(wèn)了一些一直搞前端的朋友，大部份都在百度阿里等工作。參考大家的建議后我們做項(xiàng)目使用了zepto.js（很多搞前端的朋友應(yīng)該并不陌生）。這個(gè)框架有個(gè)很大的問(wèn)題就是不兼容wp手機(jī)，使用zepto.js開(kāi)發(fā)完項(xiàng)目后，再針對(duì)wp手機(jī)兼容做調(diào)整總感覺(jué)有些“得不償失”，后來(lái)咨詢了些朋友，他們所在的公司在開(kāi)發(fā)的時(shí)候基本都放棄wp的兼容（我只能對(duì)wp說(shuō)“呵呵”了）。后面就咨詢到有用hammer.js進(jìn)行開(kāi)發(fā)的。我們研究了下，hammer.js輕量級(jí)，封裝的也比較好。用起來(lái)也很方便。兼容性也不錯(cuò)。但網(wǎng)上中文資料比較少，園子寫hammer的就更少了。因此有了這篇文章。

  此文章基于hammer.js 官網(wǎng)：http://hammerjs.github.io/ ，版本基于v2.0.4。如果該文章的api已過(guò)期，請(qǐng)自行到官網(wǎng)查詢最新api。此文章只做入門使用。

二、hammer.js是什么

  hammer.js是一款開(kāi)源的移動(dòng)端腳本框架，他可以完美的實(shí)現(xiàn)在移端開(kāi)發(fā)的大多數(shù)事件，如：點(diǎn)擊、滑動(dòng)、拖動(dòng)、多點(diǎn)觸控等事件。不需要依賴任何其他的框架，并且整個(gè)框架非常小，\在使用時(shí)非常簡(jiǎn)單，代碼示例如下：

<div id="test" class="test"></div> 
  <script type="text/javascript"> 
    //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
    //為該dom元素指定觸屏移動(dòng)事件 
    hammertime.on("pan", function (ev) { 
     //控制臺(tái)輸出 
     console.log(ev); 
    }); 
</script>

三、事件架構(gòu)

 hammer.js主要針對(duì)觸屏的6大事件進(jìn)行監(jiān)聽(tīng)。如下圖所示：

1、Pan事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指放下并移動(dòng)事件，即觸屏中的拖動(dòng)事件。這個(gè)事件在屏觸開(kāi)發(fā)中比較常用，如：左拖動(dòng)、右拖動(dòng)等，如手要上使用QQ時(shí)向右滑動(dòng)出現(xiàn)功能菜單的效果。該事件還可以分別對(duì)以下事件進(jìn)行監(jiān)聽(tīng)并處理：Panstart：拖動(dòng)開(kāi)始、Panmove：拖動(dòng)過(guò)程、Panend：拖動(dòng)結(jié)束、Pancancel：拖動(dòng)取消、Panleft：向左拖動(dòng)、Panright：向右拖動(dòng)、Panup：向上拖動(dòng)、Pandown：向下拖動(dòng)。

2、Pinch事件：在指定的dom區(qū)域內(nèi)，兩個(gè)手指（默認(rèn)為兩個(gè)手指，多指觸控需要單獨(dú)設(shè)置）或多個(gè)手指相對(duì)（越來(lái)越近）移動(dòng)或相向（越來(lái)越遠(yuǎn)）移動(dòng)時(shí)事件。該事件事以分別對(duì)以下事件進(jìn)行監(jiān)聽(tīng)并處理：Pinchstart：多點(diǎn)觸控開(kāi)始、Pinchmove：多點(diǎn)觸控過(guò)程、Pinchend：多點(diǎn)觸控結(jié)束、Pinchcancel：多點(diǎn)觸控取消、Pinchin：多點(diǎn)觸控時(shí)兩手指距離越來(lái)越近、Pinchout：多點(diǎn)觸控時(shí)兩手指距離越來(lái)越遠(yuǎn)。

3、Press事件：在指定的dom區(qū)域內(nèi)觸屏版本的點(diǎn)擊事件，這個(gè)事件相當(dāng)于PC端的Click事件，該不能包含任何的移動(dòng)，最小按壓時(shí)間為500毫秒，常用于我們?cè)谑謾C(jī)上用的“復(fù)制、粘貼”等功能。該事件分別對(duì)以下事件進(jìn)行監(jiān)聽(tīng)并處理： Pressup：點(diǎn)擊事件離開(kāi)時(shí)觸發(fā)。

4、Rotate事件：在指定的dom區(qū)域內(nèi)，當(dāng)兩個(gè)手指或更多手指成圓型旋轉(zhuǎn)時(shí)觸發(fā)（就像兩個(gè)手指擰螺絲一樣）。該事件分別對(duì)以下事件進(jìn)行監(jiān)聽(tīng)并處理：Rotatestart：旋轉(zhuǎn)開(kāi)始、Rotatemove：旋轉(zhuǎn)過(guò)程、Rotateend：旋轉(zhuǎn)結(jié)束、Rotatecancel：旋轉(zhuǎn)取消。

5、Swipe事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指快速的在觸屏上滑動(dòng)。即我們平時(shí)用到最多的滑動(dòng)事件。Swipeleft：向左滑動(dòng)、Swiperight：向右滑動(dòng)、Swipeup：向上滑動(dòng)、Swipedown：向下滑動(dòng)。

6、Tap事件：在指定的dom區(qū)域內(nèi)，一個(gè)手指輕拍或點(diǎn)擊時(shí)觸發(fā)該事件(類似PC端的click)。該事件最大點(diǎn)擊時(shí)間為250毫秒，如果超過(guò)250毫秒則按Press事件進(jìn)行處理。

  經(jīng)驗(yàn)分享：寫到這個(gè)事件的時(shí)候有人必然要問(wèn)了，在觸屏中我們使用Click事件不也可以嗎？這個(gè)Tap事件與Click事件有什么區(qū)別呢？博主也曾經(jīng)有過(guò)這樣的疑惑，起初在觸屏上處理點(diǎn)擊的時(shí)候也一直用的click事件，并且沒(méi)也有出現(xiàn)任何問(wèn)題，直到有一天為一個(gè)公司做了微信版本的“連連看”小游戲，連連看的業(yè)務(wù)簡(jiǎn)單來(lái)說(shuō)就是屏幕上有很多圖片，當(dāng)點(diǎn)擊兩個(gè)相同圖案的圖片時(shí)可以在中間產(chǎn)生連接線，并且產(chǎn)生爆破效果后消失。這個(gè)游戲剛開(kāi)始做的時(shí)候是在ff瀏覽器上做的測(cè)試，鼠標(biāo)點(diǎn)擊后效果非常流暢，但當(dāng)游戲部署到服務(wù)器上并用手機(jī)端操作時(shí)，iphone和wp都非常流暢，安卓下不管怎么調(diào)都是有卡頓。起初以為是手機(jī)性能的問(wèn)題，但換了高配手機(jī)后仍然會(huì)有卡頓，游戲也不是不能玩，就是反應(yīng)慢。經(jīng)過(guò)多次的測(cè)試后排除了手機(jī)配置的硬件原因，開(kāi)始懷疑click事件。經(jīng)過(guò)網(wǎng)上查閱后才得知，在安卓觸屏上，Tap事件和click事件可以同時(shí)觸發(fā)，但click事件會(huì)有幾百毫秒的延遲，即先觸發(fā)Tap事件，過(guò)一段時(shí)間再觸發(fā)click事件。后來(lái)把游戲的所有click事件修改成Tap事件問(wèn)題就自然解決了。

四、 使用實(shí)例

1、 Pan

代碼如下

 <!DOCTYPE html> 
 <html> 
 <head> 
   <meta name="viewport" content="width=device-width" /> 
   <title>Pan</title> 
   <script src="/Script/hammer.js"></script> 
   <style type="text/css"> 
     html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
     } 
  
     .test { 
       width: 100%; 
      height: 50%; 
      background: #ffd800; 
       text-align: left; 
     } 
  
    .result { 
       width: 100%; 
       height: 50%; 
       background: #b6ff00; 
       text-align: left; 
     } 
   </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件區(qū)域</div> 
   <div id="result" class="result">事件結(jié)果<br /></div> 
   <script type="text/javascript"> 
     //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
     //添加事件 
    hammertime.on("pan", function (e) { 
       document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制臺(tái)輸出 
      console.log(e); 
     }); 
  </script> 
 </body> 
 </html>

效果如下：

  

2、Pinch

代碼如下：

 <!DOCTYPE html> 
<html> 
 <head> 
   <meta name="viewport" content="width=device-width" /> 
 <title>Pinch</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
      padding: 0px; 
    } 
    .test { 
      width: 100%; 
      height: 50%; 
      background: #ffd800; 
      text-align: left; 
    } 
    .result { 
      width: 100%; 
      height: 50%; 
      background: #b6ff00; 
      text-align: left; 
    } 
  </style> 
</head> 
<body> 
  <div id="test" class="test">事件區(qū)域</div> 
  <div id="result" class="result">事件結(jié)果：捏合觸發(fā)<br /></div> 
  <script type="text/javascript"> 
    //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
    var hammertime = new Hammer(document.getElementById("test")); 
    //為該dom元素指定觸屏移動(dòng)事件 
    hammertime.add(new Hammer.Pinch()); 
    //添加事件 
    hammertime.on("pinchin", function (e) { 
      document.getElementById("result").innerHTML += "捏合初觸發(fā)<br />"; 
      //控制臺(tái)輸出 
      console.log(e); 
    }); 
  </script> 
</body> 
</html>

效果如下： 

 

3、Press

代碼如下：

 <!DOCTYPE html> 
 <html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Press</title> 
   <script src="/Script/hammer.js"></script> 
   <style type="text/css"> 
    html, body { 
      width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
     } 
  
     .test { 
       width: 100%; 
      height: 50%; 
       background: #ffd800; 
       text-align: left; 
    } 
    .result { 
       width: 100%; 
       height: 50%; 
      background: #b6ff00; 
       text-align: left; 
     } 
   </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件區(qū)域</div> 
   <div id="result" class="result">事件結(jié)果：按壓超過(guò)500ms觸發(fā)<br /></div> 
  <script type="text/javascript"> 
     //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
    hammertime.on("press", function (e) { 
      document.getElementById("result").innerHTML += "超過(guò)500ms了<br />"; 
      //控制臺(tái)輸出 
      console.log(e); 
     }); 
   </script> 
</body> 
</html>

效果如下：

 

4、Rotate

代碼如下：

 <!DOCTYPE html> 
 <html> 
<head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Rotate</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
       padding: 0px; 
    } 
    .test { 
      width: 100%; 
       height: 50%; 
      background: #ffd800; 
       text-align: left; 
     } 
     .result { 
       width: 100%; 
       height: 50%; 
      background: #b6ff00; 
       text-align: left; 
     } 
  </style> 
 </head> 
 <body> 
  <div id="test" class="test">事件區(qū)域</div> 
<div id="result" class="result">事件結(jié)果：旋轉(zhuǎn)觸發(fā)<br /></div> 
  <script type="text/javascript"> 
    //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
     //為該dom元素指定觸屏移動(dòng)事件 
    hammertime.add(new Hammer.Rotate()); 
     //添加事件 
    hammertime.on("rotate", function (e) { 
       document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制臺(tái)輸出 
       console.log(e); 
     }); 
   </script> 
 </body> 
 </html>

效果如下：

 

5、Swipe

代碼如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Swipe</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
      width: 100%; 
       height: 100%; 
      margin: 0px; 
      padding: 0px; 
     } 
    .test { 
       width: 100%; 
      height: 50%; 
      background: #ffd800; 
       text-align: left; 
    } 
    .result { 
       width: 100%; 
      height: 50%; 
       background: #b6ff00; 
       text-align: left; 
    } 
  </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件區(qū)域</div> 
  <div id="result" class="result">事件結(jié)果：向左滑動(dòng)觸發(fā)<br /></div> 
   <script type="text/javascript"> 
    //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
    hammertime.on("swipeleft", function (e) { 
      document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; 
       //控制臺(tái)輸出 
       console.log(e); 
     }); 
  </script> 
 </body> 
</html>

效果如下： 

 

6、Tab

代碼如下：

<!DOCTYPE html> 
 <html> 
 <head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Tap</title> 
  <script src="/Script/hammer.js"></script> 
  <style type="text/css"> 
    html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
      padding: 0px; 
     } 
    .test { 
       width: 100%; 
      height: 50%; 
       background: #ffd800; 
      text-align: left; 
     } 
    .result { 
       width: 100%; 
      height: 50%; 
      background: #b6ff00; 
      text-align: left; 
    } 
  </style> 
 </head> 
 <body> 
   <div id="test" class="test">事件區(qū)域</div> 
   <div id="result" class="result">事件結(jié)果：點(diǎn)擊觸發(fā)<br /></div> 
   <script type="text/javascript"> 
     //創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的dom元素 
     var hammertime = new Hammer(document.getElementById("test")); 
    //添加事件 
     hammertime.on("tap", function (e) { 
      document.getElementById("result").innerHTML += "點(diǎn)擊觸發(fā)了，長(zhǎng)按無(wú)效<br />"; 
       //控制臺(tái)輸出 
      console.log(e); 
     }); 
  </script> 
 </body> 
 </html>

效果如下：

 

上述的實(shí)例還是有所區(qū)別的。在Pinch事件和Rotate事件中，我們用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其他四個(gè)事件沒(méi)有用，而是直接添加了事件的監(jiān)聽(tīng)程序。原因在于，我們?cè)趎ew Hammer(htmlElement)的時(shí)候，Hammer.js默認(rèn)對(duì)Pan、Press、Swipe和Tab事件進(jìn)行了監(jiān)聽(tīng)。但沒(méi)有對(duì)Pinch和Rotate事件進(jìn)行監(jiān)聽(tīng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論