1.可通過修改圖片的寬高來縮放圖片
2.可通過修改transform進(jìn)行縮放圖片，使用transform默認(rèn)的作用中心是元素的中心點(diǎn)，需要通過transform-origin:0 0調(diào)整作用中心點(diǎn)
3.不足：沒有實(shí)現(xiàn)從手指觸碰的位置為作用中心達(dá)到縮放效果

代碼如下 ：

一.js

selector：要縮放的圖片

var touchScale = function(seletor) {// 參數(shù)one是為了區(qū)分屏幕上現(xiàn)在是一根手指還是兩根手指，因?yàn)樵诨瑒?dòng)的時(shí)候兩根手指先離開一根會(huì)觸發(fā)一根手指移動(dòng)圖片位置這個(gè)方法var one = false, $touch = $(seletor),imgLeft = parseInt($touch.css('left')),imgTop = parseInt($touch.css('top')),originalWidth = $touch.width(),originalHeight = $touch.height(),baseScale = parseFloat(originalWidth/originalHeight);var store = {scale: 1};function siteData(name) {imgLeft = parseInt(name.css('left'));imgTop = parseInt(name.css('top'));}// 獲取坐標(biāo)之間的距離function getDistance(start, stop) {return Math.hypot(stop.x - start.x, stop.y - start.y);}// $(seletor).parent().selector讓我們可以選擇類，不一定要指定id// $('#'+).on('touchstart touchmove touchend', function(event){$(document).on('touchstart touchmove touchend', $(seletor).parent().selector, function(event){var $me = $(seletor),touch1 = event.originalEvent.targetTouches[0], // 第一根手指touch事件touch2 = event.originalEvent.targetTouches[1], // 第二根手指touch事件fingers = event.originalEvent.touches.length; // 屏幕上手指數(shù)量//手指放到屏幕上的時(shí)候，還沒有進(jìn)行其他操作if (event.type == 'touchstart') {// 阻止事件冒泡event.preventDefault();// 第一個(gè)觸摸點(diǎn)的坐標(biāo)store.pageX = touch1.pageX;store.pageY = touch1.pageY;if (fingers == 2) {store.pageX2 = touch2.pageX;store.pageY2 = touch2.pageY;store.moveable = true;one = false;}else if (fingers == 1) {one = true;}store.originScale = store.scale || 1;}//手指在屏幕上滑動(dòng)else if (event.type == 'touchmove') {event.preventDefault();if (fingers == 2) {if (!store.moveable) {return;}// 雙指移動(dòng)if (touch2) {if(!store.pageX2) {store.pageX2 = touch2.pageX;}if(!store.pageY2) {store.pageY2 = touch2.pageY;}}else{return}// 雙指縮放比例計(jì)算:originScale/scale=初始距離/后來距離，即：scale=originScale*（后來距離/初始距離)var zoom = getDistance({x: touch1.pageX,y: touch1.pageY}, {x: touch2.pageX,y: touch2.pageY}) /getDistance({x: store.pageX,y: store.pageY}, {x: store.pageX2,y: store.pageY2});var newScale = store.originScale * zoom// 最大縮放比例限制if (newScale > 3) {newScale = 3;}// 記住當(dāng)前縮放值store.scale = newScale// 圖片縮放效果$me.css({'left' : imgLeft,'top' : imgTop,// 1.通過修改寬高縮放圖片'width' : originalWidth*newScale,'height' : (originalWidth*newScale)/baseScale,// 2.通過修改transform縮放圖片，transform-origin作用中心點(diǎn)// 'transform': 'scale('+newScale+')',// 'transform-origin': '0 0' });}else if (fingers == 1) {if (one) {$me.css({'left' : imgLeft + (touch1.pageX - store.pageX),'top' : imgTop + (touch1.pageY - store.page)});}}}//手指移開屏幕else if (event.type == 'touchend') {store.moveable = false;delete store.pageX2;delete store.pageY2;}});};touchScale('#map')

二.html

<div class="mapImgBox"><div id="map"></div> </div>

三.css

.mapImgBox{width: 100%;height: 65vh;border-radius: 10px;background-color: #7F7F7F;overflow: auto; } #map{width: 40%;height: 100%;margin: 0 auto;background-image: url(../images/map.png);background-repeat:no-repeat;background-size: 90% 90%;background-position: center; }

文章參考：
通過transform縮放
通過width、height縮放

總結(jié)

以上是生活随笔為你收集整理的移动端js实现双指缩放，单指拖动图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。