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

最新推荐文章于 2024-08-06 09:51:20 发布

qq_26495107

最新推荐文章于 2024-08-06 09:51:20 发布

阅读量2.6k

点赞数

分类专栏： js

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的图片缩放插件PinchZoom.js的使用方法，通过引入该插件和jQuery，可以轻松实现网页中图片的放大缩小功能。此外，还介绍了如何实现图片懒加载以提高页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址:http://blog.youkuaiyun.com/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(){
                // alert('浏览器高度'+scrollH)
                var imgH = $(this).offset().top

                //加载可见区域的图片
                if(imgH<scrollH+windowH)
                {
                    $(this).attr('src',$(this).attr('_src'))
                    $(this).removeAttr('hide');
                }
            })
   }

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