欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

移動(dòng)端手指放大縮小插件與js源碼

 更新時(shí)間:2017年05月22日 11:28:44   作者:MauriceChans  
這篇文章主要介紹了移動(dòng)端手指放大縮小插件與js源碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了移動(dòng)端手指放大縮小的具體代碼,供大家參考,具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>縮放</title>
 <style>
  #box{width:100px;
   height:100px;
  background: red;}
  html,body{width:100%;height:100%; overflow:hidden;}
 </style>
 <script>

   document.addEventListener('DOMContentLoaded',function() {
    var c=1;//先定義一個(gè)初始值
    var oBox=document.getElementById('box');
    document.addEventListener('touchstart',function (ev) {//手指點(diǎn)下
     var oldC=c;//把初始值放到oldC里面
     function getC(ev) {
      var x1=ev.targetTouches[0].pageX;
      var y1=ev.targetTouches[0].pageY;//兩根手指縮放肯定需要兩根手指,【0】第一根手指的Xy的坐標(biāo)

      var x2=ev.targetTouches[1].pageX;//第二根手指的坐標(biāo)
      var y2=ev.targetTouches[1].pageY;

      var a=x1-x2;//第一根手指的pageX-第二根手指的pageX,這樣正好是一個(gè)之間三角形 得到兩個(gè)直角邊;
      var b=y1-y2;//同上
      return Math.sqrt(a*a+b*b)//已知兩個(gè)直角邊開(kāi)平方得出 斜角邊
     }
     if(ev.targetTouches.length==2){//判斷是否是兩根手指 是的話 把兩根手指點(diǎn)上去的時(shí)候的 斜腳邊的初始值 放到 downC里面
      var downC=getC(ev);
     }
     document.addEventListener('touchmove',function (ev) { //手指移動(dòng)的時(shí)候
      if(ev.targetTouches.length==2){//判斷移動(dòng)的時(shí)候是否是兩根手指
       c=getC(ev)/downC+oldC;//這個(gè)時(shí)候的getC(ev)是move時(shí)候的,用移動(dòng)后的斜腳邊的值除沒(méi)移動(dòng)的值加上他的初始值,
       oBox.style.webkitTransform='scale('+c+')';//通過(guò)scale----2D縮放轉(zhuǎn)換
      }

     },false)



    },false)
   },false)

 </script>

</head>
<body>
 <div id="box"></div>
</body>

</html>

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

相關(guān)文章

  • js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法

    js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法

    這篇文章主要介紹了js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法,涉及JavaScript圖片加載及屬性操作相關(guān)技巧,需要的朋友可以參考下
    2016-02-02
  • JavaScript時(shí)間格式化函數(shù)功能及使用示例

    JavaScript時(shí)間格式化函數(shù)功能及使用示例

    這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 十個(gè)JavaScript?lodash中的高頻使用方法整理

    十個(gè)JavaScript?lodash中的高頻使用方法整理

    本文梳理lodash中那些高頻使用的超究極無(wú)敵好用方法,熟練使用下面的十個(gè)方法能夠讓你的代碼原地起飛,為你的開(kāi)發(fā)之旅極大的減輕心智負(fù)擔(dān),快跟隨小編一起學(xué)習(xí)一下吧
    2024-01-01
  • 用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼

    用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼

    用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼...
    2007-03-03
  • 詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例

    詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例

    對(duì)于某一個(gè)頁(yè)面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長(zhǎng),為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下
    2023-10-10
  • pdfh5.js的使用方法以及解決遇到的坑

    pdfh5.js的使用方法以及解決遇到的坑

    這篇文章主要給大家介紹了關(guān)于pdfh5.js的使用方法以及解決遇到的坑的解決辦法,pdfh5.js基于pdf.js和jQuery,web/h5/移動(dòng)端PDF預(yù)覽手勢(shì)縮放插件,需要的朋友可以參考下
    2024-02-02
  • JS技巧之一行賦值語(yǔ)句能玩出多少花樣

    JS技巧之一行賦值語(yǔ)句能玩出多少花樣

    很多前端只會(huì)謝謝頁(yè)面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語(yǔ)句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果

    JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • Dom加載讓圖片加載完再執(zhí)行的腳本代碼

    Dom加載讓圖片加載完再執(zhí)行的腳本代碼

    當(dāng)大家使用window.onload執(zhí)行一個(gè)函數(shù)時(shí),必須要等到頁(yè)面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時(shí)候圖片的數(shù)量比較多,所以需要很多時(shí)間下載。更令人尷尬的是,當(dāng)網(wǎng)頁(yè)文檔(或者說(shuō)Dom)已經(jīng)加載完畢,而圖片尚未加載完畢,很多用戶已經(jīng)開(kāi)始瀏覽網(wǎng)頁(yè),但這時(shí)很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行,這就導(dǎo)致一部分功能不能完美地給用戶使用,更嚴(yán)重的是會(huì)給用戶留下不好的印象!
    2008-05-05
  • 詳解JavaScript Alert函數(shù)執(zhí)行順序問(wèn)題

    詳解JavaScript Alert函數(shù)執(zhí)行順序問(wèn)題

    本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問(wèn)題,對(duì)此感興趣的同學(xué),可以實(shí)驗(yàn)一下,以便解決平時(shí)遇到的一些奇怪的問(wèn)題。
    2021-05-05

最新評(píng)論