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

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

个人的思路是先让图片按百分比显示，在通过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%;
}

完工！

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

iOS开发——手势识别器（用手势实现图片旋转和缩小放大）
iOS开发中,除了有关触摸的这组方法来控制用户的手指触控外,还可以用UIGestureRecognize的衍生类来进行判断,方便了开发. UIGestureRecognize的子类类别有以下几种: U ...
Excel单元格插入图片并实现单击放大或缩小功能（含VBA代码）
文章目录 0 引言 1 提前准备VBA代码 1.1 ThisWorkbook的代码: 1.2 模块的代码: 2 设置步骤 2.1 VBA代码设置单元格 2.2 插入图片到单元格 2.3 以启用宏的方式 ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...
Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘
前言 JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于 ...
css3为图片添加鼠标移入放大效果
css3为图片添加鼠标移入放大效果只需要为添加效果的图片定义一个伪类 img.zoom-img:hover {-webkit-transform: scale(1.15);-webkit-trans ...
uni-app图片如何设置双指放大缩小
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小,并且放大的同时可以左右移动 ...
ppt矩形里面的图片怎么放大缩小_PPT图片如何点击放大
PPT图片如何点击放大 [提要]<[电脑]PPT中图片点击放大效果的实现>由小编收集整理的,谨供需要实现电脑的朋友参考.内容如下: 用PPT做产品展示时,我们需要让观众看清楚细节.但同时又 ...
ios中嵌套h5做的app，长按图片默认会有放大效果；如何禁止
ios中嵌套h5做的app,长按图片默认会有放大效果:如何禁止:img { -webkit-touch-callout: none; }:只需要添加这个属性
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...

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

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

最新文章

热门文章