移动端手指放大缩小插件与js源码
本文实例为大家分享了移动端手指放大缩小的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
我正在做自己的画布抽屉项目，只是停留在放大/缩小功能上。在我的项目中，我使用缩放和平移来进行缩放，因为我想将所有画布及其元素保持在中心。在画了一点草图(不是数学天才)之后，我成功地画出了下面的公式用于翻译过程，因此缩放后画布将保持在它的视口的中间:旧的宽度和高度/ 2 -新的宽度和高度(这是旧的宽度和高度乘以比例步长，在我的例子中是1.1)/2。从逻辑上讲，这应该行得通。但是在尝试了几次放大和缩小
-
我一直在做曼德尔布洛特集，并试图缩放，但缩放模式变得非常麻烦。当我缩放它完美地缩放，但图像大小减少到原来的一半。下次我再次缩放时，图片大小会增加，并试图跳过查看窗口。代码是c /opengl.在这里发布之前，我试图让我的代码变得干净一点。 执行时
-
本文向大家介绍移动端如何禁止用户手动缩放页面？相关面试题，主要包含被问及移动端如何禁止用户手动缩放页面？时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍原生js实现拖拽移动与缩放效果，包括了原生js实现拖拽移动与缩放效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码，供大家参考，具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 效果如下，简单的拖拽 第二步—简单的缩放功能 1.设置方位 2.给原型绑定缩放的方法 效果图如下 最终效果,盒子可以拖动,可以缩
-
本文向大家介绍Android手势滑动实现ImageView缩放图片大小，包括了Android手势滑动实现ImageView缩放图片大小的使用技巧和注意事项，需要的朋友参考一下 本文推出了两种Android手势实现ImageView缩放图片大小的方法，分享给大家供大家参考，具体内容如下 方法一： 将以下代码写到MulitPointTouchListener.java中，然后对你相应的图片进行OnTo
-
问题内容： 我正在尝试模仿动画和以下浮动操作按钮的颜色更改。 浮动操作按钮的工作方式是关闭白色，打开蓝色。 但是，我在动画和更改颜色方面一直不成功。 这些是我尝试执行此操作的尝试，您可以看到我已经注释掉了我尝试执行此操作的所有不同方式。 这是我的代码： Many thanks for any suggestions. 问题答案： 此动画有两个阶段。第一个缩放X和Y轴，第二个缩小它。因此，我们可以将