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. 大数据学习day13------第三阶段----scala01-----函数式编程。scala以及IDEA的安装,变量的定义,条件表达式,for循环(守卫模式,推导式,可变参数以及三种遍历方式),方法定义,数组以及集合(可变和非可变),数组中常用的方法

    具体见第三阶段scala-day01中的文档(scala编程基础---基础语法)  1. 函数式编程(https://www.cnblogs.com/wchukai/p/5651185.html): ...

  2. 使用WtmPlus低代码平台提高生产力

    低代码平台的概念很火爆,产品也是鱼龙混杂. 对于开发人员来说,在使用绝大部分低代码平台的时候都会遇到一个致命的问题:我在上面做的项目无法得到源码,完全黑盒.一旦我的需求平台满足不了,那就是无解.   ...

  3. 通信方案软件设计(环形动态申请内存,支持USART+IIC+SPI+CAN协议

    1 <STM32进阶之串口环形缓冲区实现>中讲得比较清楚(链接) 2 amobbs中讲的方法有点复杂,以下是链接和参考源码: 通信方案软件设计(环形动态申请内存,支持USART+IIC+S ...

  4. minSdkVersion、targetSdkVersion、targetApiLevel的区别

    在AndroidMenifest.xml中,常常会有下面的语句:  <uses-sdk android:minSdkVersion="4" android:targetSdk ...

  5. spring的不同事务传播行为和用途。

    1.PROPAGATION_REQUIRED:如果当前没有事务,就创建一个事务,如果当前存在事务,就加入该事务,该设置是最常用的设置. 2.PROPAGATION_SUPPORTS:支持当前事务,如果 ...

  6. spring中JDBCTemplate的简单应用

    package cn.itcast.datasource.jdbctemplate;import cn.itcast.utils.JDBCUtils;import org.springframewor ...

  7. drone 使用git tag触发构建

    配置ref为tag .drone.yml中配置trigger为ref trigger: ref: - refs/tags/FileService 或者配置when为ref when: ref: - r ...

  8. 『学了就忘』Linux服务管理 — 76、RPM包安装的服务管理

    目录 1.独立服务的启动管理 2.独立服务的自启动管理 方式一: 方式二:(推荐) 方式三: 3.验证 1.独立服务的启动管理 (1)使用/etc/init.d/目录中的启动脚本启动服务(推荐) [r ...

  9. redis迁移工具redis-migrate-tool

    目录 一.简介 二.测试 三.安装 四.验证 一.简介 redis-migrate-tool是在redis之间迁移数据的一个方便且有用的工具.他会已服务方式不断同步两边的数据.等到合适时间,中断red ...

  10. Jenkins配置java项目

    目录 一.场景介绍 二.项目配置 配置插件 配置项目 一.场景介绍 在部署完Jenkins后,需要将现有的maven项目(Jenkis的开源插件),放到Jenkins上,用于自动化运维的改造. 项目地 ...