本文實例為大家分享了hammer.js實現(xiàn)圖片手勢放大效果的具體代碼,供大家參考,具體內(nèi)容如下
我們注重客戶提出的每個要求,我們充分考慮每一個細(xì)節(jié),我們積極的做好網(wǎng)站設(shè)計、網(wǎng)站建設(shè)服務(wù),我們努力開拓更好的視野,通過不懈的努力,創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽,這一切,也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù):網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力,DIV+CSS,PHP及ASP,ASP.Net,SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。
//圖片手勢放大 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();
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁標(biāo)題:hammer.js實現(xiàn)圖片手勢放大效果
當(dāng)前地址:http://muchs.cn/article44/pdpiee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、微信小程序、手機網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、Google、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)