移动端手指放大缩小插件与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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 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生成自己的LOG文件
2006/10/09 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
破解Session cookie的方法
2006/07/28 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python下载图片实现方法(超简单)
2017/07/21 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
学习礼仪心得体会
2014/09/01 职场文书
十二生肖观后感
2015/06/12 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js