js实现手机端图片双指缩放变大变小插件

最新推荐文章于 2024-03-20 13:12:57 发布
VIP文章 最新推荐文章于 2024-03-20 13:12:57 发布
阅读量3w 收藏 33
点赞数 8
分类专栏： 插件 文章标签： 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gl0ry/article/details/56055414
版权

对于手机上图片的缩放通常有两种：
一种是屏幕上有一张图片，直接双指缩放，如下图：
这里写图片描述这里写图片描述
还有一种是类似于手机相册一样，一张一张的，点击单张之后，全屏打开，在进行缩放操作，如下图：
这里写图片描述
这里写图片描述

接下来，介绍第一种情况的插件，pinchzoom.js，用法很简单，只需要修改img的路径，在引用pinchzoom.js以及你平时用的jquery就可以。
pinchzoom.js下载链接

贴上完整的代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" conte
最低0.47元/天 解锁文章
Ya_Wen
关注
  • 8
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
Pinchzoom.js插件实现手指触摸图片放大缩小
11-23
Pinchzoom.js插件实现手指触摸图片放大缩小
html5 双指缩放图片,js实现移动端图片预览：手势缩放， 手势拖动，双击放大......
weixin_31942999的博客
06-04 2704
查看示例效果：一、功能介绍图片预览主要有以下几个功能点组成：监听图片点击事件，进入图片预览模式自定义手势事件, (双指缩放，滑动，双击。。。)监听图片手势事件，通过 transform-matrix 实现图片的各种变换；二、实现方法1、图片预览模式图片预览即点击图片在页面中插入一个黑色全屏背景框并将图片居中显示。封装时，为了只对指定图片添加功能，可通过监听指定类名或添加某种属性的img标签监听；另...
JavaScript-全网最简洁好用的双指缩放！
word_tian_的博客
03-20 249
今天要给图片预览组件加上手机端使用的双指缩放功能，让手机端用户的体验更好，于是先上网搜索了不少双指缩放的方案，找了半天，大体上都是用scale方法，再搭配一些七的八的监听，我直接CV过来试用，效果不是很满意，玩手机这么多年，相信大家都知道双指缩放什么样的效果是最好的，于是基于各位高手的代码，本人做了一些小修改，代码更加简洁，并放弃scale()缩放，不知为何，用了scale()，图片的位置会在缩放的开始发生变化，这显然是不好的！因此我决定不用scale()
js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
weixin_34245082的博客
10-22 3560
前言本文将介绍如何通过js实现移动端图片预览，包括图片的 预览模式，手势缩放，手势拖动，双击放大等基本功能；代码地址http://pangyongsheng.github.io/imgPreview/查看示例效果：一、功能介绍　　图片预览主要有以下几个功能点组成：监听图片点击事件，进入图片预览模式自定义手势事件, （双指缩放，滑动，双击。。。）监听图片手势事件，通过 transform-matr...
如何让移动端的 前端 div 支持拖拽，多点触控pinch，放大，缩小，双击？
C++编程的专栏
11-25 4586
有个网站 公布了 10种支持 各种手势  的  前端的js库，包括 旋转，快速拖动等，其中有Hammer.js quojs.我在使用hammer的过程中遇到一点问题。最后还是用了quojs来做的放大和缩小，quojs在谷歌上找到的 是coffeescript写出来的， 弄起来很麻烦， 我最后找了个用quojs的网站， 直接用了它的js， 但是我双击放大用的另一个js库。放到和缩小div 主要是
Touch.js 手势库 拖动 缩放和 旋转！！！
Mr_F__的博客
11-05 1639
  &lt;!DOCTYPE html&gt; &lt;html lang=""&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=&quot
js移动端手势放大缩小移动图片（优化）
sjpeter的专栏
12-25 4166
#msgPopover img{ width: 100%; /*padding: .2rem .4rem;*/ overflow: auto; position: relative; } <div id="msgPopover" class="mui-popover"> <div class="msg-img"> <img id="msgPopoverImg" src=.
js实现div的缩放功能
qq_36281882的博客
07-01 9540
下面总结一下自己实现的两种缩放方式，一种是以左上角为缩放中心，一种是以元素中心为缩放中心。 一、以div左上角为缩放中心
点击图片放大,实现移动端双指缩放,单指拖拽功能
S_peeding的博客
08-28 5686
点击图片放大,实现移动端双指缩放,单指拖拽功能 记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失 一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: 1.html部分: 下面贴出主要 代码片段。 <div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index:2;
移动端 图片放大缩小 （双手指） 单手指移动
weixin_30411239的博客
07-17 1311
<style> .container{width: 100%;height: 200px;text-align: center;} .imgMax{width: 100%;} .containerBg{background-color: black;width: 100%;height: 100%;position: fixed;top: 0px;le...
jquery手指触摸滑动放大图片的方法(比较靠谱的方法)
newmiracle学习天地
10-25 2513
jquery手指触摸滑动放大图片的方法(比较靠谱的方法) touch.js demo left：0 top：0 scale：
移动端jquery效果显示地图双指缩放，单指拖动
09-28
可以在div图片上添加css动画效果，发光点，模拟地图的一些交汇方式，给大家介绍jQuery和js实现移动端双指缩放，希望对大家有所帮助。
js 双指缩放，双指放大，双击放大，移动端双指放大缩小
07-11
双指缩放，图片双指缩放，在图片上有固定的坐标，并且点击固定坐标有相对应的事件触发，demo
微信小程序自定义组件实现图片单指拖动双指缩放效果
03-18
一个小程序用的双指缩放组件，相关文章地址见博客《微信小程序使用自定义组件实现图片双指缩放效果》。(现在资源怎么不可以设置为不要积分了0.)
微信小程序实现图片双滑缩放大小
03-29
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：  js ： Page({ data: { touch: { distance: 0, scale: 1, baseWidth: null, baseHeight: null, ...
JS实现移动端双指缩放和旋转方法
10-15
主要介绍了JS实现移动端双指缩放和旋转方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
hammer.js移动端图片手指缩放插件
07-22
手机移动端手指缩放图片的插件hammer.js
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码
04-25
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码 微分方程 含有导数或微分的方程称为微分方程，未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意常数的解称为微分方程的特解。 微分方程的通解 所含相互独立的任意常数的个数与微分方程的阶数相等的微分方程的解称为微分方程的通解。
桌面聊天室
最新发布
04-25
该毕业设计采用了c/s架构，通过javase中的知识编写完成，系统功能包括：用户注册，用户登录，聊天功能。 对于刚学完java基础的同学来说可以通过该毕业设计加深对所学知识的理解。该系统使用socket进行数据的发送，用户注册登录之后，可以进行多人聊天，功能类似qq群聊。
微信小程序实现图片的双指缩放
06-13
要实现微信小程序中图片的双指缩放，可以使用小程序自带的 `<canvas>` 组件。具体步骤如下： 1. 在 WXML 文件中添加 `<canvas>` 组件，并设置宽高和 ID： ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在 JS 文件中获取 `<canvas>` 组件的上下文，并加载图片： ```javascript const ctx = wx.createCanvasContext('myCanvas'); const img = new Image(); img.src = '图片地址'; img.onload = function () { ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); } ``` 3. 监听 `<canvas>` 组件的 touch 事件，实现双指缩放： ```javascript let distance = 0; // 初始距离 let scale = 1; // 初始缩放比例 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true, }).exec((res) => { const canvas = res[0].node; // 获取 canvas 节点 const canvasWidth = res[0].width; // 获取 canvas 宽度 const canvasHeight = res[0].height; // 获取 canvas 高度 canvas.addEventListener('touchstart', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算初始距离 } }); canvas.addEventListener('touchmove', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; const newDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算新距离 const delta = newDistance - distance; // 计算距离差 scale += delta / 100; // 根据距离差更新缩放比例 distance = newDistance; // 更新距离 ctx.drawImage(img, 0, 0, canvasWidth * scale, canvasHeight * scale); // 根据新的缩放比例绘制图片 ctx.draw(); } }); }); ``` 在 touchstart 事件中记录双指触摸的初始距离，然后在 touchmove 事件中根据双指移动的距离差更新缩放比例，并重新绘制图片。最后调用 `ctx.draw()` 方法将画布内容绘制到屏幕上。 需要注意的是，在 touchmove 事件中需要使用 `ctx.drawImage()` 方法重新绘制图片，并传入新的宽高参数，这里的宽高需要根据当前的缩放比例计算得出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值