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

最新推荐文章于 2021-12-18 21:42:04 发布

Start-ZJ

最新推荐文章于 2021-12-18 21:42:04 发布

阅读量2.3k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38054172/article/details/100097189

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

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

这个是H5的代码：

<div class="body-div1">
        <img  id="dbutton" class="photo" src="shuangjifangda.jpg" alt="">
    </div>

CSS的代码：

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

Jquery的代码：

<script>
        $(document).ready(function () {
            $('.body-div1').dblclick(function () {
                var c = $('#dbutton');
                c.toggleClass("photo");
            })
        })
    </script>

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

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

<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;
            }
        })
    </script>

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

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

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%;
}

完工！

Start-ZJ

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录