移动端手指放大缩小插件与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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 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设计聊天室步步通
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php获取域名的google收录示例
2014/03/24 PHP
php 购物车完整实现代码
2014/06/05 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python读取xml文件方法解析
2020/08/04 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
品质管理部岗位职责范文
2014/03/01 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
教师职位说明书
2014/07/29 职场文书
个人向公司借款协议书
2014/10/09 职场文书
《实心球》教学反思
2016/02/23 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS