使用iscroll插件实现手机前端的缩放功能

使用方法:
比如你要放大的图片是<img src="images/3/3_1.jpg">
1、在图片外围包一个div(也可以为其他元素)
2、在这个div的外围再包一个div(也可以为其他元素),设id为img
3、使用插件:
(1)获取该元素,绑定touchmove事件,清除该元素的默认事件。
document.getElementById('img').addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
(2)通过以下方法,就可以绑定缩放事件了
   var myScroll1 = new IScroll('#s1', {
        zoom: true,
        scrollX: true,
        scrollY: true,
        mouseWheel: true,
        wheelAction: 'zoom'
    });

4、需要注意的问题:
以上使用的id所代表的元素,可以缩放的实际上是该元素下的第一个元素,如果该ID下有多个元素,会出问题。
HTML的结构不一定按照我以上所写的,大家灵活使用。

你可能感兴趣的:(使用iscroll插件实现手机前端的缩放功能)