移动端手指放大缩小插件与js源码


Posted in Javascript onMay 22, 2017

本文实例为大家分享了移动端手指放大缩小的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title>缩放</title>
 <style>
  #box{width:100px;
   height:100px;
  background: red;}
  html,body{width:100%;height:100%; overflow:hidden;}
 </style>
 <script>

   document.addEventListener('DOMContentLoaded',function() {
    var c=1;//先定义一个初始值
    var oBox=document.getElementById('box');
    document.addEventListener('touchstart',function (ev) {//手指点下
     var oldC=c;//把初始值放到oldC里面
     function getC(ev) {
      var x1=ev.targetTouches[0].pageX;
      var y1=ev.targetTouches[0].pageY;//两根手指缩放肯定需要两根手指,【0】第一根手指的Xy的坐标

      var x2=ev.targetTouches[1].pageX;//第二根手指的坐标
      var y2=ev.targetTouches[1].pageY;

      var a=x1-x2;//第一根手指的pageX-第二根手指的pageX,这样正好是一个之间三角形 得到两个直角边;
      var b=y1-y2;//同上
      return Math.sqrt(a*a+b*b)//已知两个直角边开平方得出 斜角边
     }
     if(ev.targetTouches.length==2){//判断是否是两根手指 是的话 把两根手指点上去的时候的 斜脚边的初始值 放到 downC里面
      var downC=getC(ev);
     }
     document.addEventListener('touchmove',function (ev) { //手指移动的时候
      if(ev.targetTouches.length==2){//判断移动的时候是否是两根手指
       c=getC(ev)/downC+oldC;//这个时候的getC(ev)是move时候的,用移动后的斜脚边的值除没移动的值加上他的初始值,
       oBox.style.webkitTransform='scale('+c+')';//通过scale----2D缩放转换
      }

     },false)



    },false)
   },false)

 </script>

</head>
<body>
 <div id="box"></div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 #Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 #Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
详解Angular 4.x NgIf 的用法
May 22 #Javascript
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php解决约瑟夫环示例
2014/04/09 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
零件设计自荐信范文
2013/11/27 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
一岗双责责任书
2014/04/15 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
经理岗位职责
2015/02/02 职场文书
React如何创建组件
2021/06/27 Javascript