html手机自动放大缩小,手机端缩放.html
*{ margin: 0; padding: 0; touch-action: pan-y;}
html, body{ width: 100%; height: 100%;; position: relative; overflow: hidden; }
#box{ width: 300px; height: 300px; position: absolute; background-color: black; }
手机端缩放
function setGesture(el){
var obj={}; //定义一个对象
var istouch=false;
var start=[];
var scale = null;
var rotation = null;
el.addEventListener("touchstart",function(e){
if(e.touches.length>=2){ //判断是否有两个点在屏幕上
istouch=true;
start=e.touches; //得到第一组两个点
obj.gesturestart&&obj.gesturestart.call(el,e); //执行gesturestart方法
};
},false);
document.addEventListener("touchmove",function(e){
e.preventDefault();
if(e.touches.length>=2&&istouch){
console.log(1);
var now=e.touches; //得到第二组两个点
scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例,getDistance是勾股定理的一个方法
rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]); //得到旋转角度,getAngle是得到夹角的一个方法
e.scale=scale.toFixed(2);
e.rotation=rotation.toFixed(2);
obj.gesturemove&&obj.gesturemove.call(el,e); //执行gesturemove方法
};
},false);
document.addEventListener("touchend",function(e){
if(istouch){
istouch=false;
obj.gestureend&&obj.gestureend.call(el,e); //执行gestureend方法
};
},false);
return obj;
};
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
function getAngle(p1, p2) {
var x = p1.pageX - p2.pageX,
y = p1.pageY- p2.pageY;
return Math.atan2(y, x) * 180 / Math.PI;
};
var box=document.querySelector("#box");
var boxGesture=setGesture(box); //得到一个对象
boxGesture.gesturestart=function(e){ //双指开始
box.style.backgroundColor="yellow";
box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度
};
boxGesture.gesturemove=function(e){ //双指移动
box.innerHTML = e.scale+"
"+e.rotation;
box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度
};
boxGesture.gestureend=function(e){ //双指结束
box.innerHTML="";
box.style.cssText="background-color:red";
box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度
};
一键复制
编辑
Web IDE
原始数据
按行查看
历史
html手机自动放大缩小,手机端缩放.html相关推荐
- 解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小
一.需求问题 在公司的项目开发中,我们经常需要开发移动端的项目.但是,在移动端中,点击输入框的时候,网页页面会自动放大或者缩小.这个也并不是我们所想要的,我们只需要向输入框中输入内容就可以了. 二.需 ...
- html禁止手机页面放大缩小
html禁止手机页面放大缩小 <meta name="viewport" content="width=device-width,minimum-scale=1.0 ...
- html-2-禁止手机页面放大缩小
html禁止手机页面放大缩小添加如下设置即可 <meta name="viewport" content="width=device-width,minimum-s ...
- html手机自动放大,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是 那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
- html+手机自适应源码,手机端页面自适应解决方案—rem布局(进阶版,附源码示例)...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
- php图片自适应手机屏幕,织梦手机端图片自适应设置方法
随着自适应网站使用量日趋上升,很多用户碰到这样的问题,内容里图片在PC端浏览器是正常的,但是用手机打开后会变形.今天我们就来一起解决下织梦手机站图片变形这个问题. 手机端图片变形原因: 由于织梦后台编 ...
- 手机java环境_手机端搭建Java编译运行环境
今天带给大家的是手机端搭建Java编译运行环境(手机党福利). 众所周知,Java是一种可以撰写跨平台应用软件的面向对象程序设计语言.Java技术具有卓越的通用性.高效性.平台移植性和安全性,广泛应用 ...
- axure手机页面设计说明_Axure手机端查看交互图(完美展示)
Axure制作的原型图,PC端查看比较方便,但如何在手机端查看,一直是个比较麻烦的问题,今天给大家分享一下如何在手机端查看原型图. 首先,咱们来简单分析一下Axure输出的三种原型文件: 1.原型图H ...
- html文字自动放大缩小单位,如何css控制字体按百分比放大缩小
字体百分比放大缩小是可以的,不同单位不同设置情况 1. "Ems"(em):"em"是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例 ...
最新文章
- Opengl-深度测试模板测试
- DataList 外部事件获取DataList内部值
- Jenkins在Centos7的安装
- mysql-8.0.14-winx64,mysql-8.0.15-winx64 解压版安装教程及退出的三种方式
- cJSON源码及解析流程详解
- python判断文件是否打开_python如何判断一个文件是否处于打开状态?
- 细节:关于异步调用的解决方案
- JFinalConfig
- Educational Codeforces Round 20 B. Distances to Zero
- html5,用或不用,它都在那里
- 查看C++ C#的dll或exe文件是32位还是64位
- Async和Await如何简化异步编程,几个实例让你彻底明白!
- asp.net图书馆管理系统
- 阿里云 php shopex,开shopex
- spring xml解析详解
- 上海图书馆及分馆特色
- Matplotlib-Python-绘制基础饼形图,分裂饼形图,环形饼形图
- Python爬取百度翻译及有道翻译
- Linux系统查看FC HBA卡信息的方法
- 学习C++该看什么书?
热门文章
- 不会算法,拿什么来忽悠面试官?
- 04-基于CentOS7安装RabbitMQ3.10.7
- 港科夜闻| 香港科技大学(广州)自2023年起招收港澳台本科学生
- jasperreports导出pdf报表时粗体的显示问题
- [天机]大魏集团战报
- 不是吧阿sir,Java自学资料百度云
- JAVA+MYSQL+CSV用正则表达式获取CPU天梯分数
- 每日简报 4月12日简报新鲜事 在这里,60秒读懂世界
- 花里胡哨地使用MQ定时推送消息到直播房间
- IntelliJ IDEA2017 设置主题字体发现文件路径是‘¥’人民币符号处理方式