移動(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í)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)移動(dòng)端微信頁(yè)面禁止字體放大
- 移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- JS網(wǎng)頁(yè)圖片查看器(兼容IE、FF)可控制圖片放大縮小移動(dòng)
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)用滾動(dòng)條來(lái)放大縮小圖片的代碼
- js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法
- JS實(shí)現(xiàn)用鍵盤(pán)控制DIV上下左右+放大縮小與變色
- js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
- JS 仿Flash動(dòng)畫(huà)放大/縮小容器
相關(guān)文章
JavaScript時(shí)間格式化函數(shù)功能及使用示例
這篇文章主要為大家介紹了JavaScript時(shí)間格式化函數(shù)功能及使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11十個(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)投票的代碼...2007-03-03詳細(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-10JavaScript實(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í),必須要等到頁(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)題,對(duì)此感興趣的同學(xué),可以實(shí)驗(yàn)一下,以便解決平時(shí)遇到的一些奇怪的問(wèn)題。2021-05-05