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. 移动开发之h5学习大纲

    移动开发学习形式:授课.自学 1.html5 css3 htm5shiv.js response.js 2.流式布局 自适应布局 盒模型 弹性盒模型 响应式布局3.iscroll swiper boo ...

  2. css相关,position定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position. display属性指定网页的布局.两个重要的布局,弹性布局flex和网格布局grid. 本文介绍非常有用的po ...

  3. JAVA中的六种日期类型使用

    基本的6种日期类 /** * 六种时间类型的类 * 数据库格式的时间三种格式 */ java.util.Date date = new java.util.Date();//年与日时分秒 //数据库的 ...

  4. Java事务与JTA

    一.什么是JAVA事务 通俗的理解,事务是一组原子操作单元,从数据库角度说,就是一组SQL指令,要么全部执行成功,若因为某个原因其中一条指令执行有错误,则撤销先前执行过的所有指令.更简答的说就是:要么 ...

  5. redis安装与简单实用

    1.在Linux上redis的安装时十分简单的: 第一步:wget http://download.redis.io/releases/redis-2.8.12.tar.gz 解压: tar zxvf ...

  6. iBatis查询时报"列名无效"或"找不到栏位名称"无列名的错误原因及解决方法

    iBatis会自动缓存每条查询语句的列名映射,对于动态查询字段或分页查询等queryForPage, queryForList,就可能产生"列名无效".rs.getObject(o ...

  7. 【AWS】【TroubleShooting】EC2实例无法使用SSH远程登陆(EC2 failure for SSH connection)

    1. Login AWS web console and check the EC2 instance.

  8. t01_docker安装TiDB

    Docker环境安装TiDB,在官方说明的基础上补充了几个细节,安装记录如下 个人环境-vbox上安装centos7.4系统 CPU:12核24线程,分配给虚拟机12线程 MEM: 48G,分配给虚拟 ...

  9. [BUUCTF]PWN——picoctf_2018_rop chain

    picoctf_2018_rop chain 附件 步骤: 例行检查,32位,开启了NX保护 试运行一下程序,看到输入太长数据会崩溃 32位ida载入,习惯性的检索程序里的字符串,看见了flag.tx ...

  10. 手动上下eureka上面服务

    手动下eureka curl -X PUT http://eureka.xxx.xxx.com/eureka/apps/VIDEO-API/111.111.111.111:test-api:0000/ ...