很多人都懂一些简单的电脑系统问题的解决方案,但是双指的解决思路却鲜为人知,小编前几天就遇到了双指的问题,于是准备整理一些双指的解决思路,其实只需要按照1:对于手机上图片的缩放通常有两种: 一种是屏幕上有一张图片,直接双指缩放,如下图:2:还有一种是类似于手机相册一样,一张一张的,点击单张之后,全屏打开,在进行缩放操作的步骤即可,大家一起来看看小编整理的关于双指的解决方法:
1:对于手机上图片的缩放通常有两种: 一种是屏幕上有一张图片,直接双指缩放,如下图:
2:还有一种是类似于手机相册一样,一张一张的,点击单张之后,全屏打开,在进行缩放操作
3:接下来,介绍第一种情况的插件,pinchzoom.js,用法很简单,只需要修改img的路径,在引用pinchzoom.js以及你平时用的jquery就可以。
4:第二种缩放情况插件,scale.js,img一定要放在list的div里面,除了引用scale.js外还需要引用scale.css
5:贴上完整的代码:
<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>图片缩放</title>
6: <link rel="stylesheet" href="themes/scale.css" type="text/css" /></head><body> <div class="list"> <img src="themes/images/2.jpg" /> </div> <section class="imgzoom_pack"> <div class="imgzoom_x">X</div> <div class="imgzoom_img"><img src="" /></div> </section> <script src="js/scale.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event){ ImagesZoom.init({ "elem": ".list" }); }, false); </script></body></html>