當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

点击图片放大,实现移动端双指缩放,单指拖拽功能

發布時間：2024/3/12 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了点击图片放大,实现移动端双指缩放,单指拖拽功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

記錄一下最近項目中用到的點擊圖片出現一個遮罩層,同時放大圖片顯示,移動端可雙指縮放圖片并單指拖拽圖片.再次點擊遮罩層透明區域,遮罩層消失

一.實現效果:

頁面原圖展示:

點擊圖片后:

二.代碼實現:

1.html部分:

下面貼出主要代碼片段。

2.js部分(用到jQuery,所以記得引入哦):
這部分代碼判斷是移動端還是PC端,返回false為移動端,true為PC端.用它返回的值來區別是否移動端然后執行之后移動端事件.

下面展示一些代碼片段。

$(function() {$(".main-newsdate img").click(function() {var _this = $(this);//將當前的pimg元素作為_this傳入函數 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); //移動端手指移動事件,如果不需要移動端手指事件,這一部分內容可以不加,只要上面兩行代碼以及imgShow()事件var eleImg = document.querySelector('#innerdiv');var store = {scale : 1};//定義移動端的初始位置var position_top, position_left,pageX,pageY;// 縮放事件的處理//事件開始eleImg.addEventListener('touchstart', function(event) { event.preventDefault();//阻止默認事件，防止底部內容滾動//在觸屏設備下，要判斷是單指還是多指操作，可以通過event.touches數組對象的長度判斷。var touches = event.touches;var events = touches[0];//單指var events2 = touches[1];//雙指if (touches.length == 1) { //單指操作 pageX = Number(events.pageX);pageY = Number(events.pageY);store.moveable = true;var _obj = $('#innerdiv');// .css獲取的值是字符串position_left = parseFloat(_obj.css('left').split('px'));position_top = parseFloat(_obj.css('top').split('px'));} else {// 第一個觸摸點的坐標store.pageX = events.pageX;store.pageY = events.pageY;store.moveable = true;if (events2) {store.pageX2 = events2.pageX;store.pageY2 = events2.pageY;}store.originScale = store.scale || 1;}},{ passive: false }); //passive: false必須加上,否則控制臺報錯//開始移動document.addEventListener('touchmove', function(event) {event.preventDefault();//阻止默認事件，防止底部滾動if (!store.moveable) {return;}var touches = event.touches;var events = touches[0];var events2 = touches[1];if (touches.length == 1) {var pageX2 = Number(events.pageX);var pageY2 = Number(events.pageY);//控制圖片移動$('#innerdiv').css({'top': position_top + pageY2 - pageY + 'px',"left": position_left + pageX2 - pageX + 'px'})} else {// 雙指移動if (events2) {// 第2個指頭坐標在touchmove時候獲取if (!store.pageX2) {store.pageX2 = events2.pageX;}if (!store.pageY2) {store.pageY2 = events2.pageY;}// 獲取坐標之間的距離var getDistance = function(start, stop) {//用到三角函數return Math.hypot(stop.x - start.x,stop.y - start.y);};// 雙指縮放比例計算var zoom = getDistance({x : events.pageX,y : events.pageY}, {x : events2.pageX,y : events2.pageY}) / getDistance({x : store.pageX,y : store.pageY}, {x : store.pageX2,y : store.pageY2});// 應用在元素上的縮放比例var newScale = store.originScale * zoom;// 最大縮放比例限制if (newScale > 3) {newScale = 3;}// 記住使用的縮放值store.scale = newScale;// 圖像應用縮放效果eleImg.style.transform = 'scale('+ newScale + ')';}}},{ passive: false });document.addEventListener('touchend', function() {store.moveable = false;delete store.pageX2;delete store.pageY2;});document.addEventListener('touchcancel', function() {store.moveable = false;delete store.pageX2;delete store.pageY2;});});//移動端手指頁面結束});//遮罩層圖片位置function imgShow(outerdiv, innerdiv, bigimg, _this) {//這是剛才判斷是否PC端的函數事件var flag = IsPC();console.log(flag);var src = _this.attr("src");//獲取當前點擊的pimg元素中的src屬性 $(bigimg).attr("src", src);//設置#bigimg元素的src屬性 /*獲取當前點擊圖片的真實大小，并顯示彈出層及大圖*/$("<img/>").attr("src", src).load(function() {//注意在使用這種方法獲取窗口高度和寬度的時候,//務必在html頁面最上方加上一句<!DOCTYPE html>,否則獲取屏幕高度時會出問題var windowW = $(window).width();//獲取當前窗口寬度var windowH = $(window).height();//獲取當前窗口高度 var realWidth = this.width;//獲取圖片真實寬度 var realHeight = this.height;//獲取圖片真實高度 var imgWidth, imgHeight;var scale = 0.8;//縮放尺寸，當圖片真實寬度和高度大于窗口寬度和高度時進行縮放 if (realHeight > windowH * scale) {//判斷圖片高度 imgHeight = windowH * scale;//如大于窗口高度，圖片高度進行縮放 imgWidth = imgHeight / realHeight * realWidth;//等比例縮放寬度if (imgWidth > windowW * scale) {//如寬度扔大于窗口寬度 imgWidth = windowW * scale;//再對寬度進行縮放 }} else if (realWidth > windowW * scale) {//如圖片高度合適，判斷圖片寬度 imgWidth = windowW * scale;//如大于窗口寬度，圖片寬度進行縮放 imgHeight = imgWidth / realWidth * realHeight;//等比例縮放高度 } else {//如果圖片真實高度和寬度都符合要求，高寬不變 if (flag == false) {imgWidth = realWidth;imgHeight = realHeight;} else if(realWidth>=1000){ //這里我怕圖片太大又做了個判斷imgWidth = realWidth ;imgHeight = realHeight;}else{imgWidth = realWidth *2 ;imgHeight = realHeight *2;}}$(bigimg).css("width", imgWidth);//以最終的寬度對圖片縮放 var w = (windowW - imgWidth) / 2;//計算圖片與窗口左邊距 var h = (windowH - imgHeight) / 2;//計算圖片與窗口上邊距 $(innerdiv).css({"top" : h,"left" : w});//設置#innerdiv的top和left屬性 $(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg });$(outerdiv).click(function() {//再次點擊淡出消失彈出層 $(this).fadeOut("fast");});};

注意點:

1.阻止默認行為是配合passive使用,否則控制臺報錯

默認使用passive:true提高滾動性能并減少崩潰，passive即順從的，是指它順從瀏覽器的默認行為。設置該屬性的目的主要是為了在阻止事件默認行為導致的卡頓。如果我們阻止了這一默認行為，瀏覽器是無法預先知道的，必須等待事件監聽器執行完成后，才知道要去阻止默認行為。等待監聽器的執行是耗時的，，有些甚至耗時很明顯，這樣就會導致頁面卡頓。即便監聽器是個空函數，也會產生一定的卡頓，畢竟空函數的執行也會耗時。所以就有了passive屬性，如果要阻止默認事件可以設置passive：false.
2…height()方法和.css(“height”)的區別：

返回值不同：.height()方法返回的是數字類型(20)； .css(“height”)返回的是字符串類型(20px);

本文移動端手指縮放方法方法主要參考大佬的博文:
https://www.zhangxinxu.com/wordpress/2020/06/mobile-event-touches-zoom-sacle/

總結

以上是生活随笔為你收集整理的点击图片放大,实现移动端双指缩放,单指拖拽功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。