h5手机app端双击,手势缩放插件,图片懒加载

原文地址:http://blog.csdn.net/gl0ry/article/details/56055414
接下来,介绍第一种情况的插件,pinchzoom.js,用法很简单,只需要修改img的路径,在引用pinchzoom.js以及你平时用的jquery就可以。 

pinchzoom.js下载链接:https://pan.baidu.com/s/1qYDBEO0

代码:

<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(){
                // alert('浏览器高度'+scrollH)
                var imgH = $(this).offset().top

                //加载可见区域的图片
                if(imgHthis).attr('src',$(this).attr('_src'))
                    $(this).removeAttr('hide');
                }
            })
   }

     runs();
    /*********** 屏幕滚动加载图片 ************/
    $(window).scroll(function(){
        runs();
    })

你可能感兴趣的:(js)