移动端 图片手指放大缩小 以及图片懒加载
首先要引入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(); 即可