pinchzoom.js 这个插件可以简单的实现这一功能

<div class="big_pos_img page">
<div class="pinch-zoom" id="test" data-scale="1">
<img src="data:images/timg.jpg"/>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/pinchzoom.js"></script>
$(function(){
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
});

下载地址:
链接: https://pan.baidu.com/s/18KNkAVYuWpU38cvZ3Cc0pw 密码: v0fz

手机端h5页面 图片根据手势放大缩小的更多相关文章

  1. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  2. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  3. 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...

  4. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  5. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  6. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. htm5手机端实现拖动图片

    htm5手机端实现拖动图片 <pre> <!doctype html><html><head> <title>Mobile Cookbook ...

  8. 手把手教你打造ImageView支持手势放大缩小

    写在前面 最近有了新的任务,学习的时间比以前少了不少,Java回炉的文估计是得缓缓了,不过每周一篇尽量保质保量.最近感觉我文写的有点不好,因为我写东西除非必要,不然概念性的东西我基本上都是一笔带过…… ...

  9. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

随机推荐

  1. volatile原理和应用场景

    volatile是java语言中的一个关键字,常用于并发编程,有两个重要的特点:具有可见性,java虚拟机实现会为其满足Happens before原则;不具备原子性.用法是修饰变量,如:volati ...

  2. Ubantu nodejs卸载与二进制安装

    #apt-get 卸载 sudo apt-get remove --purge npm sudo apt-get remove --purge nodejs sudo apt-get remove - ...

  3. 【Java 8】 集合间转换工具——Stream.collect

    集合运算 交集 (list1 + list2) List<T> intersect = list1.stream() .filter(list2::contains) .collect(C ...

  4. Shell脚本定期清空大于1G的日志文件

    一个关于如何在指定文件大于1GB后,自动删除的问题. 批处理代码如下: #!/bin/bash # 当/var/log/syslog大于1GB时 # 自动将其备份,并清空 # 注意这里awk的使用 i ...

  5. pandas读取csv文件中文乱码问题

    1.为什么会出现乱码问题,用什么方式编码就用什么方式解码,由于csv不是用的utf-8编码,故不能用它解码. 常用的编码方式有 utf-8,ISO-8859-1.GB18030等. 2.中文乱码原因: ...

  6. LuoguP2556 [AHOI2002]黑白图像压缩 题解

    Content 题目描述太过于繁琐而无法简化,请前往原题面查看. 数据范围:\(1\leqslant n\leqslant 8\times 10^4\). Solution & Code 一个 ...

  7. More Effective C++ 基础议题(条款1-4)总结

    More Effective C++ 基础议题(条款1-4)总结 条款1:仔细区别pointers和references 如果有一个变量,其目的是用来指向(代表)另一个对象,但是也有可能它不指向(代表 ...

  8. windows下php安装redis扩展

    查看当前PHP版本 代码中添加 phpinfo(); 下载对应的redis扩展 下载链接:https://pecl.php.net/package/redis 因为我的PHP版本是5.6的,所以red ...

  9. [COCI2018-2019#2] Sunčanje 题解

    link 考虑简洁的 \(\text{cdq}\) 做法. 约定:第 \(i\) 个矩形左下角为 \((xl_i,yl_i)\),右上角为 \((xr_i,yr_i)\),所有坐标都已离散化. 如果 ...

  10. Linux使用docker部署nacos

    官网地址:https://nacos.io/zh-cn/docs/quick-start-docker.html 先把sql文件导入到mysql中 我也放了基础的sql /* * Copyright ...