H5 Pinchzoom.js 插件实现手指触摸图片放大缩小

最新推荐文章于 2021-06-04 08:24:28 发布
最新推荐文章于 2021-06-04 08:24:28 发布
阅读量1.6k 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37672347/article/details/101295030
版权
qq_37672347
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Pinchzoom.js插件实现手指触摸图片放大缩小
02-08
Pinchzoom.js插件实现手指触摸图片放大缩小 本人已经用在手机项目中
推荐开源项目：ZOOM.JS - 简洁优雅的图片缩放插件
gitblog_00090的博客
05-10 299
推荐开源项目：ZOOM.JS - 简洁优雅的图片缩放插件 项目地址:https://gitcode.com/fat/zoom.js 项目介绍 ZOOM.JS 是一款基于 jQuery 的轻量级图片放大插件，灵感来源于 Medium 平台的图片缩放效果。这款插件提供了一种流畅且自然的图像缩放体验，同时在退出时也能够平滑地滑出或通过快捷键（Esc 或点击）消失，给用户带来干净整洁的操作感受。 项目技术...
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
html5手指滑动图片放大缩小,移动端图片根据手势缩放
weixin_39890327的博客
06-04 808
插件描述：PinchZoom.js是一个Javript库，提供多点触摸手势缩放和拖动任何DOM元素。注意请在移动端查看效果使用要求jQuery or Zepto.ECMA 5 support初始化newPinchZoom($('#your-element'),options);选项tapZoomFactor:Thezoomfactoradoubletapzoomsto...
hammer.js移动端图片手指缩放插件
07-22
手机移动端手指缩放图片的插件hammer.js
jQuery H5弹出图片放大缩小旋转插件.zip
07-11
js特效-jQuery H5弹出图片放大缩小旋转插件
移动端点击图片放大特效PhotoSwipe.js插件实现
11-23
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看，滑动切换下一张，图片保存到本地。 <style> .pnav{...
拖动放大缩小图片截图js H5代码.zip
07-11
代码片段： </div>
H5 fullPage.js插件实现的网站全屏滚动切换效果.zip
07-11
代码片段： $(document).ready(function(){ $(".red").click(function(){ $(this).addClass("shake"); setTimeout(function(){ $(".red").removeClass("shake"); $(".windows").fadeIn();...
jQuery手机端手指触摸图片放大代码
06-24
jQuery手机端手指触摸图片放大代码是一款html5 div图片放大插件插件下载。
HTML-手机端-图片放大-手动缩放-示例（pinchzoom插件实现）
07-06
Web_使用pinchzoom插件实现图片手势缩放. 效果描述： 一个基于jQuery的插件——Pinchzoom.js 可以实现移动网页中的图片放大或者缩小，用手指控制即可 当然，其中的jQuery完全可以换成zepto.js
pinchzoom手机图片缩放插件
09-30
pinchzoom手机图片缩放插件，简单使用容易上手。只需要引用一个js文件即可使用
JQuery点击放大缩小图片并可左右滑动
05-09
JQuery实现点击放大缩小图片并可左右滑动图片播放，一个比较酷炫的效果，适合美化页面等
jQuery图片缩放图片图片转动仿QQ空间图片查看特效（全屏，放大，缩小，旋转，镜像，鼠标滚轮缩放）
07-08
jQuery图片缩放图片图片转动仿QQ空间图片查看特效（全屏，放大，缩小，旋转，镜像，鼠标滚轮缩放）
基于jq-viewer的pc和移动端的图片缩放，托动、旋转等
01-08
基于jquery封装的viewerjs的pc图片缩放、拖拽、旋转等、也可使用于移动端
jquery实现图片缩放
Mr_LucasNie的博客
06-20 1602
jquery实现图片缩放 <img id="img" onmousewheel="return imgScale(this)"> function imgScale(obj){ //alert(parseInt(obj.style.zoom,10)); var zo...
H5 查看大图。缩放图片
Jioho的博客
01-24 8447
之前前前后后找了很多类似的JS库，都非常的优秀，比如 viewerjs 或者其他。 然而这些JS库都太厉害了。封装的功能也是太多了，最重要的是这个库放大的图片。 并不能满屏，只能以实际上传的图片大小来显示 最后还是用了swiper。最后实现的效果： 可以通过双击放大图片 在移动端可以通过手指缩放放大/缩小图片 附上简单的源代码，写的比较简陋，仅供参考，可以稍作修改 &lt;!DOCTYP...
hammer.js插件h5移动端手指拖拽缩放效果实践方法
weixin_30568591的博客
07-18 1172
由于要做一个在移动端触控元素的效果，需要去网上找一些插件，经过一番百度，涉及到touch的插件并不多，主要有hammer.js和panzoom.js两个插件。panzoom简单易用，直接绑定某个元素初始化就行了，但是后来发现，panzoom.js在安卓微信端上有兼容性问题，自己改插件的话很难，真是狗血了。 所以就换成了hammer.js，如果按照hammer官方api直接来写的话，会让...
uniapp实现手指手势放大缩小
最新发布
06-01
UniApp 是一个跨平台的开发框架，可以用于开发同时支持多个平台（如 H5、小程序、App 等）的应用程序。 实现手指手势放大缩小可以通过以下步骤： 1. 在组件中监听手势事件，如 @touchstart、@touchmove 等。 2. 在事件回调函数中计算手指的位置和移动距离，以及两个手指之间的距离。 3. 根据手指移动的距离和两个手指之间的距离，计算出放大缩小的比例。 4. 根据计算出的比例，使用 CSS3 的 transform 属性来实现元素的缩放。 下面是一个简单的示例代码： ``` <template> <view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <view class="box" :style="{transform: 'scale(' + scale + ')'}"></view> </view> </template> <script> export default { data() { return { startX: 0, startY: 0, distance: 0, scale: 1 } }, methods: { onTouchStart(event) { if (event.touches.length === 2) { const touch1 = event.touches const touch2 = event.touches this.startX = (touch1.pageX + touch2.pageX) / 2 this.startY = (touch1.pageY + touch2.pageY) / 2 this.distance = Math.sqrt( Math.pow(touch1.pageX - touch2.pageX, 2) + Math.pow(touch1.pageY - touch2.pageY, 2) ) } }, onTouchMove(event) { if (event.touches.length === 2) { const touch1 = event.touches const touch2 = event.touches const endX = (touch1.pageX + touch2.pageX) / 2 const endY = (touch1.pageY + touch2.pageY) / 2 const newDistance = Math.sqrt( Math.pow(touch1.pageX - touch2.pageX, 2) + Math.pow(touch1.pageY - touch2.pageY, 2) ) this.scale *= newDistance / this.distance this.distance = newDistance } }, onTouchEnd(event) { if (event.touches.length === 0) { this.startX = 0 this.startY = 0 this.distance = 0 } } } } </script> <style> .container { position: relative; width: 100vw; height: 100vh; background-color: #f8f8f8; } .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: #e85454; transform-origin: center center; transition: all .3s ease-in-out; } </style> ``` 该示例中定义了一个 `container` 容器和一个 `box` 元素，当用户在 `box` 元素上进行手势操作时，会触发相应的事件回调函数，并根据手势移动的距离和两个手指之间的距离计算出缩放比例，并使用 `transform` 属性对 `box` 元素进行缩放。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值