移動端手指放大縮小插件與js源碼
更新時間：2017年05月22日 11:28:44 作者：MauriceChans
這篇文章主要介紹了移動端手指放大縮小插件與js源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了移動端手指放大縮小的具體代碼，供大家參考，具體內容如下
<!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;//先定義一個初始值
var oBox=document.getElementById('box');
document.addEventListener('touchstart',function (ev) {//手指點下
var oldC=c;//把初始值放到oldC里面
function getC(ev) {
var x1=ev.targetTouches[0].pageX;
var y1=ev.targetTouches[0].pageY;//兩根手指縮放肯定需要兩根手指，【0】第一根手指的Xy的坐標
var x2=ev.targetTouches[1].pageX;//第二根手指的坐標
var y2=ev.targetTouches[1].pageY;
var a=x1-x2;//第一根手指的pageX-第二根手指的pageX，這樣正好是一個之間三角形 得到兩個直角邊；
var b=y1-y2;//同上
return Math.sqrt(a*a+b*b)//已知兩個直角邊開平方得出 斜角邊
}
if(ev.targetTouches.length==2){//判斷是否是兩根手指 是的話 把兩根手指點上去的時候的 斜腳邊的初始值 放到 downC里面
var downC=getC(ev);
}
document.addEventListener('touchmove',function (ev) { //手指移動的時候
if(ev.targetTouches.length==2){//判斷移動的時候是否是兩根手指
c=getC(ev)/downC+oldC;//這個時候的getC(ev)是move時候的，用移動后的斜腳邊的值除沒移動的值加上他的初始值，
oBox.style.webkitTransform='scale('+c+')';//通過scale----2D縮放轉換
}
},false)
},false)
},false)
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js判斷圖片加載完成后獲取圖片實際寬高的方法,涉及JavaScript圖片加載及屬性操作相關技巧,需要的朋友可以參考下2016-02-02
這篇文章主要為大家介紹了JavaScript時間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本文梳理lodash中那些高頻使用的超究極無敵好用方法,熟練使用下面的十個方法能夠讓你的代碼原地起飛,為你的開發(fā)之旅極大的減輕心智負擔,快跟隨小編一起學習一下吧2024-01-01
用ajax實現(xiàn)的自動投票的代碼...2007-03-03
對于某一個頁面內容繁多,如果我們滾動的時間較長,為了增加用戶體驗,我們需要實現(xiàn)點擊某一個按鈕,然后滾動到對應的區(qū)域,滾動的時候,右側對應的分類實現(xiàn)高亮,所以本文給大家詳細介紹講解了js實現(xiàn)電梯導航,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關于pdfh5.js的使用方法以及解決遇到的坑的解決辦法,pdfh5.js基于pdf.js和jQuery,web/h5/移動端PDF預覽手勢縮放插件,需要的朋友可以參考下2024-02-02
很多前端只會謝謝頁面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關于JS技巧之一行賦值語句能玩出多少花樣的相關資料,需要的朋友可以參考下2022-10-10
JavaScript實現(xiàn)省市聯(lián)動效果
這篇文章主要介紹了JavaScript實現(xiàn)省市聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
當大家使用window.onload執(zhí)行一個函數(shù)時，必須要等到頁面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時候圖片的數(shù)量比較多，所以需要很多時間下載。更令人尷尬的是，當網頁文檔（或者說Dom）已經加載完畢,而圖片尚未加載完畢，很多用戶已經開始瀏覽網頁，但這時很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行，這就導致一部分功能不能完美地給用戶使用，更嚴重的是會給用戶留下不好的印象！2008-05-05
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題，對此感興趣的同學，可以實驗一下，以便解決平時遇到的一些奇怪的問題。2021-05-05