hammer.js插件h5移動端手指拖拽縮放效果實踐方法


由於要做一個在移動端觸控元素的效果,需要去網上找一些插件,經過一番百度,涉及到touch的插件並不多,主要有hammer.js和panzoom.js兩個插件。panzoom簡單易用,直接綁定某個元素初始化就行了,但是后來發現,panzoom.js在安卓微信端上有兼容性問題,自己改插件的話很難,真是狗血了。

所以就換成了hammer.js,如果按照hammer官方api直接來寫的話,會讓人摸不着頭腦,官方給出的方法並不像panzoom那樣直接綁定元素塊,而是綁定一個區域,然后給出一些擴展方法,具體方法里面怎么寫,就要讀者自己去腦洞大開了。

在網上有關這方面的資料很少,經過查找,還是找到了一些和自己想要效果類似的方法。經過一番修改,總算達到預期的效果,話不多說,先看一下效果圖:

 

 

可以看到,手指移動元素和雙指縮放都沒問題,No problem ~~

如果想到更多的觸控效果,可以參考官方api自己去擴展。

 源碼地址:http://www.jiandanji.fun/blog/news-2.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM