原文地址:http://blog.csdn.net/gl0ry/article/details/56055414
接下来,介绍第一种情况的插件,pinchzoom.js,用法很简单,只需要修改img的路径,在引用pinchzoom.js以及你平时用的jquery就可以。
pinchzoom.js下载链接:https://pan.baidu.com/s/1qYDBEO0
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>图片缩放</title>
<style>
.pinch-zoom,.pinch-zoom img{
width: 100%;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
</style>
</head>
<body>
<div class="page" style="display:block">
<div class="pinch-zoom">
<img src="images/timg.jpg"/>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/pinchzoom.js"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
</body>
</html>
图片懒加载
/****** 图片lazyLoad *******/
var windowH = $(window).height();
function runs(){
var scrollH = $(window).scrollTop();
$("img[hide]").each(function(){
var imgH = $(this).offset().top
if(imgH<scrollH+windowH)
{
$(this).attr('src',$(this).attr('_src'))
$(this).removeAttr('hide');
}
})
}
runs();
/*********** 屏幕滚动加载图片 ************/
$(window).scroll(function(){
runs();
})