移动端图片根据手势缩放

所属分类:-

 129637  411  查看评论 (36)
分享到微信朋友圈
X
移动端图片根据手势缩放 ie兼容10

注意请在移动端查看效果

使用

要求

  • jQuery or Zepto.

  • ECMA 5 support

初始化

new PinchZoom($('#your-element'), options);

选项

tapZoomFactor:      The zoom factor a double tap zooms to. (default 2)
zoomOutFactor:      Resizes to original size when zoom factor is below the configured value. (default 1.3)
animationDuration:  The animation duration in milliseconds. (default 300)
maxZoom:            The maximum zoom factor. (default 4)
minZoom:            The minimum zoom factor. (default 0.5)
lockDragAxis        Locks panning of the element to a single axis. (default false)

事件

Pinchzoom 发出一些自定义的事件
pz_zoomstart  Started to zoom
pz_zoomend    Stopped zooming
pz_dragstart  Started to drag the element
pz_dragend    Stopped to drag the element
pz_doubletap  Resetting the zoom with doubletab

方法

enable:             Enables all gesture capturing (default)
disable:            Disables all gesture capturing


相关插件-

jQuery渐变式轮播图(原创)

仿京东渐变式轮播图,自动轮播,左右按钮切换及圆点切换。
 
 13903  194

基于ion.rangeslider.js 左右拖动滑块选择区间价格范围

基于ion.rangeslider.js 移动端左右拖动滑块选择区间价格范围js代码,可动态取值,用的更方便
 
 24351  323

jquery控制滚动条下拉后DIV容器在页面中的位置

jquery控制滚动条下拉后DIV容器在页面中的位置
 
 32975  346

渐变动态动画

渐变地形动画,使用anime.js来制作动画
 
 25127  359

讨论这个项目(36)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    丶空白 0
    2022/5/17 11:11:45
    怎么控制高度啊这高度是自动捕捉的 回复
    Levin 0
    2020/1/8 15:47:57

    自定义事件怎么写啊?我写了没反应

    $('.pinch-zoom').each(function() {
        new RTP.PinchZoom($(this), {
            pz_zoomstart: function() {
                alert(3);
            }
        });
    });
    回复
    asaguise 0
    2019/10/14 17:21:30
    如何循环事件给图片呢?就是多张图可以缩放 回复
    ?淡咏、夜非夜的繁华╃ 0
    2019/7/8 15:40:24
    打扰下,大佬怎么让用手势放大的图片还原
        ?王一土0
        2019/7/9 13:57:58
        你好,这个插件怎么使用呢
    回复
    河北小王爷99 0
    2019/4/12 11:10:56
    图片缩放之后竖直方向只能在一定范围内拖动,而且卡顿严重
        李十斤0
        2020/7/30 15:42:33
        给容器加个高度就可以了
    回复
    /mn★怡琳★ 0
    2019/1/18 10:14:47
    图片缩放,但是页面不可以缩放怎么实现呢 回复
    /mn★怡琳★ 0
    2019/1/18 9:33:15
    你好,放大后完关掉再打开下个图片还是放大的尺寸。怎么能关掉后还原呢
        ?淡咏、夜非夜的繁华╃0
        2019/7/8 12:55:00
        我也遇到这问题了,你解决没
        四夕柒0
        2019/7/12 15:59:21
        注释一段代码
        糖糖的0
        2021/3/31 10:04:43
        注释哪一段代码
        糖糖的1
        2021/3/31 14:17:26

        不用注释代码,重新写html就可以了

        $(".page").html('<div class="pinch-zoom"><img src="1.jpg"/></div>');

        重新初始化一下

        $('div.pinch-zoom').each(function() {
            var a = new RTP.PinchZoom($(this), {});
        });
    回复
    丫丫 0
    2018/12/3 17:12:41
    您好 为什么每次缩放完都会闪一下
        々滕不檫??0
        2019/7/9 17:23:46
        可以给元素“pinch-zoom”加个背景色,不知道为啥就不闪了
    回复
    Winki ? 0
    2018/11/27 20:17:53
    你好,拖到到图片边缘的事件监听怎么写呢 回复
    Leader Wolf 0
    2018/7/16 11:16:33
    你好,图片放大缩放回原来图片加个边框怎么写呀,麻烦指导呀? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复