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

<!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>
时间: 2024-10-11 22:35:52

移动端手指放大缩小插件与源码的相关文章

java_eclipse 反编译插件查看源码 的设置操作

1. 需要导入3个文件:net.sf.jadclipse_3.3.0.jar , jadclipse_3.3.0.jar ,jad.exe 2.改写目录,设置目录 jad.exe  存放入jdk 的bin目录下: net.sf.jadclipse_3.3.0.jar , jadclipse_3.3.0.jar , 存放入eclipse 的plug-in 目录下: 3. 改写默认的class viewer. 4. 重启浏览器. 已经可以看见底层代码了. java_eclipse 反编译插件查看源码

转:精美jQuery插件及源码 前端开发福利

原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可

10款经典创意jQuery应用插件及源码

1.jQuery带缩略图的宽屏焦点图插件 今天我们要来分享一款很不错的jQuery宽屏焦点图插件,这款焦点图插件相当大气,并且在图片上方列出了所有的缩略图,点击缩略图即可切换相应的图片.另外,我们也可以点击左右切换按钮来切换上一张和下一张图片. 在线演示 源码下载 2.HTML5 Canvas折线图表和柱形图表 之前我们已经分享过很多HTML5图表应用了,包括折线图.柱形图.饼图等,使用起来用户体验都很不错.今天要分享的一款HTML5 Canvas图表应用提供了折线图和柱形图两种,这款HTML5

10款web前端基于精美jQuery插件及源码

1.使用 SVG 制作单选和多选框动画 通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画. 在线演示 源码下载 2.PHP+jQuery+Ajax多图片上传 今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页

iDempiere 使用指南 MRP/生产插件 LiberoMFG 源码安装

Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idempiere.org/zhiDempiere 中文社区www.idempiere.org.cniDempiere 中文社区QQ群 65713012 该文档说明了如何在eclipse中配置LiberoMFG插件的调试环境安装. 此例子的环境配置可以参照我前面的配置idempiere测试环境以及eclips

Java企业微信开发_09_身份验证之移动端网页授权(有完整项目源码)

注: 源码已上传github: https://github.com/shirayner/WeiXin_QiYe_Demo 一.本节要点 1.1 授权回调域(可信域名) 在开始使用网页授权之前,需要先设置一下授权回调域.这里瞬间想到之前做JSSDK的时候,也设置过一个域名.二者本质上都是设置可信域名. 当用户授权完毕之后,请求将重定向到此域名(或者子域名)下的执行者(jsp页面或者servlet等).如何设置授权回调域,请见第二节. 1.2 获取Code https://open.weixin.

基于python语言的tensorflow的‘端到端’的字符型验证码识别源码整理(github源码分享)

基于python语言的tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的人工智能技术的发展,传统的字符验证已经形同虚设. 所以,大家一方面研究和学习此代码时,另外一方面也要警惕自己的互联网系统的web安全问题. Keywords: 人工智能,Python,字符验证码,CAPTCHA,识别,tensorflow,CNN,深度学习 2   Introduction 全自动区

【krpano】高德地图导航插件(源码+介绍+预览)

简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航      使用说明 插件共有3个文件,如下图所示: nv.js为js代码,主要作用为浏览器定位,生成地图调用uri等. nv.xml为样式文件,定义了krpano中按钮的位置 navigation.png为图标 使用时,把上述3个文件复制到项目目录,修改xml文件中的目的地参数即可. desloc对应于目

【krpano技术】浏览点赞插件(源码+介绍+预览)

简介 最近几天研究了如何在krpano全景的基础上实现记录浏览量和点赞次数,写了一个插件,方便大家使用. 效果截图如下: 每当有用户打开该全景页面时,浏览量会自动加1: 用户可以主动点击点赞按钮,点击后,赞的数量加1,第二次点赞会取消点赞. 使用说明 使用说明,插件文件共有以下5个文件: 前三个文件为图片,可以自行修改定义不同的样式 va.min.js 为js代码,用于控制点赞,与后台交互等操作 va.xml为xml文件,用于配置样式 使用时,把上述5个文件复制到项目目录,在你的xml文件里添加