移动端 图片手指放大缩小 以及图片懒加载

首先要引入jQuery.js  和pinchzoom.js

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/pinchzoom.js"></script>

2.假定html如下

<div class="content">
　　<img src="img/1.png" data-echo="img/1.png">
　　<img src="img/2.png" data-echo="img/2.png">
　　<img src="img/3.png" data-echo="img/3.png">
　　<img src="img/4.png" data-echo="img/4.png">
　　<img src="img/5.png" data-echo="img/5.png">
　　<img src="img/6.png" data-echo="img/6.png">
</div>

<div class="show">
　　　<div class="page" style="z-index:101;">
　　　　<div class="pinch-zoom" >
　　　　　　<img src="img/11.png">
　　　　　　<img src="img/11.png">
　　　　</div>
　　　</div>
</div>

class为show这一部分 就是放大的部分 class page pinch-zoom 这两个class是必备的class  是插件默认放大的class

下面是js部分

echo.init();

$(function () {
　　$(".show").hide()
　　$('.pinch-zoom').each(function () {
　　　　new RTP.PinchZoom($(this), {});
　　});
　　$('img').click(function(e) {
　　　　var imgsrc =$(this).attr('src');
　　　　$('.show').show();
　　　　$('.page').show();
　　$('.page img').attr('src',imgsrc)

});

$('.page img').click(function(e) {
　　$('.show').hide();
　　$('.page').hide()
});
})

最后加上懒加载

<script type="text/javascript" src="js/echo.min.js"></script>

在script 中加入echo.init();  即可

转载于:https://www.cnblogs.com/xulongyang/p/8920701.html