移動(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è)直角邊開平方得出 斜角邊
}
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)后的斜腳邊的值除沒移動(dòng)的值加上他的初始值，
oBox.style.webkitTransform='scale('+c+')';//通過scale----2D縮放轉(zhuǎn)換
}
},false)
},false)
},false)
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)移動(dòng)端微信頁面禁止字體放大
- 移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- JS簡單的圖片放大縮小的兩種方法
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動(dòng)
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)用滾動(dòng)條來放大縮小圖片的代碼
- js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法
- JS實(shí)現(xiàn)用鍵盤控制DIV上下左右+放大縮小與變色
- js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
- JS 仿Flash動(dòng)畫放大/縮小容器
相關(guān)文章
這篇文章主要介紹了js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法,涉及JavaScript圖片加載及屬性操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
JavaScript時(shí)間格式化函數(shù)功能及使用示例
這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
十個(gè)JavaScript?lodash中的高頻使用方法整理
本文梳理lodash中那些高頻使用的超究極無敵好用方法,熟練使用下面的十個(gè)方法能夠讓你的代碼原地起飛,為你的開發(fā)之旅極大的減輕心智負(fù)擔(dān),快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼
用ajax實(shí)現(xiàn)的自動(dòng)投票的代碼...2007-03-03
詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對于某一個(gè)頁面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長,為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于pdfh5.js的使用方法以及解決遇到的坑的解決辦法,pdfh5.js基于pdf.js和jQuery,web/h5/移動(dòng)端PDF預(yù)覽手勢縮放插件,需要的朋友可以參考下2024-02-02
很多前端只會(huì)謝謝頁面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
當(dāng)大家使用window.onload執(zhí)行一個(gè)函數(shù)時(shí)，必須要等到頁面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時(shí)候圖片的數(shù)量比較多，所以需要很多時(shí)間下載。更令人尷尬的是，當(dāng)網(wǎng)頁文檔（或者說Dom）已經(jīng)加載完畢,而圖片尚未加載完畢，很多用戶已經(jīng)開始瀏覽網(wǎng)頁，但這時(shí)很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行，這就導(dǎo)致一部分功能不能完美地給用戶使用，更嚴(yán)重的是會(huì)給用戶留下不好的印象！2008-05-05
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題，對此感興趣的同學(xué)，可以實(shí)驗(yàn)一下，以便解決平時(shí)遇到的一些奇怪的問題。2021-05-05