移动端手指放大缩小插件与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的message插件实现右下角弹出消息框
Jan 11 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
深入PHP curl参数的详解
2013/06/17 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
大专生的学习自我评价
2013/12/04 职场文书
会计师事务所实习证明
2014/11/16 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
货款欠条范本
2015/07/03 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Python List remove()实例用法详解
2021/08/02 Python