用Jquey实现双击图片放大和触摸放大的功能。

悠悠 2024-04-17 14:21 80阅读 0赞

最近有个新的需求，就是双击图片会显示原图。

个人的思路是先让图片按百分比显示，在通过jquery 的dblcliock()方法来实现双击触发的思路。

这个是H5的代码：

CSS的代码：

.body-div1{
        width: 100%;
        height: 100%;
        border: 0 solid black;
    }
    .photo{
        height: 100%;
        width: 100%;
    }

Jquery的代码：

这个代码在PC端是没问题的。但是发现这代码在移动端是无法使用的。原因个人推测应该是由于移动端不支持dblclick()方法。

所以只能自己再想一个。这次的思路是通过监听两次点击之间的时间来判断是否双击。代码如下：

后来需求要求实现一个在移动端双手滑动图片放大的功能。

找了很久的轮子，后来终于被我找到了。

pinchzoom.js

这是一个双指滑动放大的js包，下载百度下就好，是能搜索到的。

H5代码：

<!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 id="dbutton" class="photo" src="shuangjifangda.jpg" alt=""></div>
    </div>
    
    <script src="jquery-3.4.1.min.js"></script>
    <script src="pinchzoom.js"></script>
    <script>
        var i = 0;
        $('.body-div1').on('click', function () {
            i++;
            setTimeout(function () {
                i = 0;
            }, 500);
            if (i > 1) {
                var c = $('#dbutton');
                c.toggleClass("photo");
                i = 0;
            }
        })
    
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>
    </body>
    </html>

CSS：

.pinch-zoom{
        width: 100%;
        height: 100%;
        border: 0 solid black;
    }
    .photo{
        height: 100%;
        width: 100%;
    }

完工！