移动端手指放大缩小插件与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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 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
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python测试驱动开发实例
2014/10/08 Python
python目录与文件名操作例子
2016/08/28 Python
用python处理MS Word的实例讲解
2018/05/08 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python绘制热力图示例
2019/09/27 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
详解Python中第三方库Faker
2020/09/25 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
股东协议书范本
2014/04/14 职场文书
读书小明星事迹材料
2014/05/03 职场文书
工作建议书范文
2014/05/13 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python