hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
本文實(shí)例為大家分享了hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果的具體代碼,供大家參考,具體內(nèi)容如下
//圖片手勢(shì)放大 var reqAnimationFrame = (function() { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var el = $('img'); var ticking = false; var transform; var initScale = 1; var _eImg = ''; for (var m = 0; m < el.length; m++) { var mc = new Hammer.Manager(el[m]); mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan')); mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan')); mc.on('panstart panmove', onPan); mc.on('pinchstart pinchmove', onPinch); mc.on('swipe', onSwipe); } function resetElement() { el.addClass('animate'); transform = { translate: { x: 0, y: 0 }, scale: 1, angle: 0, rx: 0, ry: 0, rz: 0 }; requestElementUpdate(); } function updateElementTransform() { var value = ['translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)', 'scale(' + transform.scale + ', ' + transform.scale + ')', 'rotate3d(' + transform.rx + ',' + transform.ry + ',' + transform.rz + ',' + transform.angle + 'deg)']; value = value.join(' '); if (_eImg != '') { _eImg.style.webkitTransform = value; _eImg.style.mozTransform = value; _eImg.style.transform = value; //_eImg.css({ 'transform': value }, { '-webkit-transform': value }); } ticking = false; } function requestElementUpdate() { if (!ticking) { reqAnimationFrame(updateElementTransform); ticking = true; } } function onPan(ev) { el.removeClass('animate'); transform.translate = { x: ev.deltaX, y: ev.deltaY }; } function onPinch(ev) { if (ev.type == 'pinchstart') { initScale = transform.scale || 1; } el.removeClass('animate'); transform.scale = initScale * ev.scale; requestElementUpdate(); _eImg = ev.target; return _eImg; } function onSwipe(ev) { var angle = 10; transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0; transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0; transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle; requestElementUpdate(); _eImg = ev.target; return _eImg; } resetElement();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript實(shí)現(xiàn)商品圖片放大鏡
- js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
- JavaScript實(shí)現(xiàn)圖片放大鏡效果
- JavaScript實(shí)現(xiàn)多張圖片放大鏡效果示例【不限定圖片尺寸,rem單位】
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- js實(shí)現(xiàn)圖片局部放大效果詳解
- js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
- JS滾輪控制圖片縮放大小和拖動(dòng)的實(shí)例代碼
- JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
- JS實(shí)現(xiàn)圖片放大鏡插件詳解
- js實(shí)現(xiàn)圖片放大展示效果
- JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果
相關(guān)文章
微信小程序后端(java)開(kāi)發(fā)流程的詳細(xì)步驟
這篇文章主要介紹了微信小程序后端開(kāi)發(fā)流程的詳細(xì)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11js圖片實(shí)時(shí)加載提供網(wǎng)頁(yè)打開(kāi)速度
沒(méi)必要一開(kāi)始加載就要把全部圖片加載出來(lái),這樣子打開(kāi)網(wǎng)面的速度得到了很好提高,下面有個(gè)不錯(cuò)的思路,大家可以看看2014-09-09setTimeout()與setInterval()方法區(qū)別介紹
計(jì)時(shí)器setTimeout()和setInterval()兩個(gè)都是js的計(jì)時(shí)功能的函數(shù)兩個(gè)有些區(qū)別,下面為大家簡(jiǎn)單介紹下,希望對(duì)大家有所幫助2013-12-12你知道該如何捕獲js報(bào)錯(cuò)前的用戶(hù)行為嗎
這篇文章主要給大家介紹了該如何捕獲js報(bào)錯(cuò)前的用戶(hù)行為的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06JavaScript的常見(jiàn)兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對(duì)JavaScript的常見(jiàn)兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解)
下面小編就為大家分享一篇基于javascript 顯式轉(zhuǎn)換與隱式轉(zhuǎn)換(詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
這篇文章主要介紹了JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10