當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2024/3/12 编程问答 39 豆豆

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

記錄一下最近項(xiàng)目中用到的點(diǎn)擊圖片出現(xiàn)一個(gè)遮罩層,同時(shí)放大圖片顯示,移動(dòng)端可雙指縮放圖片并單指拖拽圖片.再次點(diǎn)擊遮罩層透明區(qū)域,遮罩層消失

一.實(shí)現(xiàn)效果:

頁面原圖展示:

點(diǎn)擊圖片后:

二.代碼實(shí)現(xiàn):

1.html部分:

下面貼出主要代碼片段。

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

下面展示一些代碼片段。

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

注意點(diǎn):

1.阻止默認(rèn)行為是配合passive使用,否則控制臺(tái)報(bào)錯(cuò)

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

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

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

總結(jié)

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

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

上一篇：英语语法第四节(主宾表从句)
下一篇： 2021-08-16记一次无意发现正方教