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

最新推荐文章于 2024-05-14 09:35:52 发布
最新推荐文章于 2024-05-14 09:35:52 发布
阅读量2.3w 收藏 8
点赞数 9
分类专栏： js效果 文章标签： h5 手机 图片缩放 Pinchzoom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forever_yours/article/details/54930106
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pinchzoom.js插件实现手指触摸图片放大缩小</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>
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<!-- 代码部分begin -->
<div class="page">
        <div class="pinch-zoom">
            <div class="description">
                <h1>Pinchzoom.js</h1>
                <p>Multi-touch zoom in Javascript</p>
            </div>
            <img src="images/frog.jpg"/>
        </div>
    </div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/pinchzoom.js"></script>
<script type="text/javascript">
   $(function () {
       $('div.pinch-zoom').each(function () {
           new RTP.PinchZoom($(this), {});
       });
   })
</script>
<!-- 代码部分end -->
</body>
</html>
有梦想的菜菜
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pinchzoom.js
12-10
pinchzoom.js 缩放
PinchZoom - 手势缩放库
gitblog_00027的博客
03-17 434
PinchZoom - 手势缩放库 PinchZoom 是一个轻量级的 JavaScript 库，用于在 Web 端实现手势缩放功能。它支持触摸屏设备和鼠标操作，为用户提供了一种自然、流畅的方式来放大或缩小网页元素。 功能与用途 PinchZoom 可以应用于各种场景，如图片查看器、地图应用或任何需要缩放功能的项目。以下是它的一些主要功能： 多点触控手势 支持双指捏合和滑动进行缩放和平移。 平滑...
推荐一款神奇的图像缩放插件：zoom.js
gitblog_00059的博客
05-14 418
推荐一款神奇的图像缩放插件：zoom.js 项目地址:https://gitcode.com/nishanths/zoom.js 在数字媒体的世界中，用户体验至关重要，而高质量的图片展示就是其中的一部分。今天，我要向大家推荐一个专为提升图片查看体验设计的开源项目——zoom.js，它是一个灵感来源于旧版Medium网站的图像放大插件。 项目介绍 zoom.js 是一个轻量级的JavaScript库...
app放大缩小，同时左右切换页面。插件pinchzoom.js在iscroll和swipper中使用
coder_daiwang的博客
10-09 3647
pinchzoom.js 代码网上可以自行点击下载pinchzoom下载 下载的压缩包demo，包含一般简单实例，以及在swipe中使用方法。 但是，我们公司前不久项目使用iscroll，所以在iscroll中也尝试引入，结果项目上线，效果很好，可以用iscroll左右滑动，同时当前页面也可以捏和放大缩小。直接上代码！ 几乎和原生无区别，只需要搞清楚具体项目要操作...
js实现手机端图片双指缩放变大变小插件
mr_lihuijie的博客
11-12 968
对于手机上图片的缩放通常有两种： 介绍第一种情况的插件，pinchzoom.js，用法很简单，只需要修改img的路径，在引用pinchzoom.js以及你平时用的jquery就可以。 pinchzoom.js下载链接 链接: https://pan.baidu.com/s/1niv1Eb2pZFqbNjUcwhg8Yw 提取码: 8hcb <!DOCTYPE html> <h...
手机js手势放大缩放图片插件
01-20
移动web APP的手势放大缩放图片插件
移动端 手势缩放拖拽功能实现
右边疯子_的博客
11-11 1518
效果图： 实现方式： 基于 PinchZoom.js Version: 2.3.4 修改源码添加如下功能 1、增加初始化居中功能 2、增加初始化缩放比功能 TODO 希望增加惯性滑动 使用示例： <template> <div> <div :style="'height:'+windowHeight+'px'"> <div id="map_img"> <img :src="...
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();...
Xamarin.Forms.PinchZoomImage：用手指捏:OK_hand:或双击Zoom放大图像
02-06
Xamarin.Forms.PinchZoomImage 用手指捏放大图像。 使用Xamarin.Forms放大和缩小图像的简单方法。 这是组件，适用于iOS，Android NuGet 名称 信息 贡献者 Xamarin.Forms.PinchZoomImage 平台支援 PinchZoomImage是一个.NET Standard 2.0库，它唯一的依赖项是Xamarin.Forms 设置/用法 不需要其他配置。 只需将软件包安装在共享项目中并使用。 您只需要在xaml文件中添加引用即可。 xmlns : pinch = " clr-namespace:Xamarin.Fo
h5完美实现移动端 手势同时控制图片 旋转 拖拽 放大 的源码
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
Pinchzoom.js插件实现手指触摸图片放大缩小.zip
07-04
效果描述： 一个基于jQuery的插件——Pinchzoom.js 可以实现移动网页中的图片放大或者缩小，用手指控制即可 当然，其中的jQuery完全可以换成zepto.js
Pinchzoom.js插件实现手指触摸图片放大缩小特效代码
03-20
效果描述： 一个基于jQuery的插件Pinchzoom.js 可以实现移动网页中的图片放大或者缩小，用手指控制即可 当然，其中的jQuery完全可以换成zepto.js
jQuery手机端手指触摸图片放大代码
06-24
本教程将介绍如何利用jQuery库实现手机端手指触摸图片放大效果。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在手机端应用中，jQuery提供了对触摸事件的支持，使得我们可以...
移动端手势操作库pinchzoom，图片捏合放大缩小
qq_40247562的博客
07-17 670
高度固定，宽度自适应，也可根据pad 的宽高来计算，实现图片等比例缩放。需求：移动端项目，实现图片根据手指的捏合来放大缩小图片。
h5 img js 点击图片放大_5分钟学会h5生成图片海报！
weixin_30486089的博客
01-06 391
生成海报这个功能很实用，之前我们学过小程序生成海报的方法，今天我们来学h5生成海报。基本原理：其实就是把你html+css写的样式转换成图片下载。如何实现的首先我们需要引入下面两个js插件原理说明首先使用 html2canvas 把你写的的样式转化成canvas画布然后使用canvas2image.js 把画布转化为img图片。使用方法HTML代码不怕你学不会就怕你不想学3分钟学会生成海...
不能实现pinch和zoom方法
sinat_19100081的博客
06-26 1296
自动化测试中需要用到pinch和zoom方法，直接调用pinch（）和zoom（）方法无效果在网上找了很多相关的文章，发现很多人都无法正常运行这两个方法，原因未知，后找到替代的方法，如下：def zoom(): x = driver.get_window_size()['width'] y = driver.get_window_size()['height'] actio...
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、付费专栏及课程。

余额充值