scale 和 zoom,以及zoom的一些变态用法
zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别:
1、scale的缩小是以图片的中心,zoom的缩小是以图片的左上角。
2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
3、注意:如果给zoom赋值两次,会使zoom的最终值为二者的乘积
关于zoom的一些变态用法:
1、如果zoom与position共同使用 的话,在zoom上的相对距离就不用再手动乘以zoom的比例了,页面会自动计算,做相对位置的
2、在用js给zoom赋值的时候,不能与css样式表里初始赋值相同,否则会无效
最后,zoom在手机端的有些应用还是挺好用哒~
scale 和 zoom,以及zoom的一些变态用法的更多相关文章
- zoom,zoom与haslayout的关系,zoom与transform: scale( )的区别
1.zoom:(缩放)
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- 2D转换下的zoom和transform:scale的区别
一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...
- 使用d3.js的时候,如何用zoom translate scale限制拖拽范围
红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 d3.behavior.zoom = function () { var moveCanvas={ width: , height: , ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- MKMapView and Zoom Levels: A Visual Guide
原帖:http://troybrant.net/blog/2010/01/mkmapview-and-zoom-levels-a-visual-guide/ So, how exactly does ...
- d3.js v4曲线图的拖拽功能实现Zoom
zoom缩放案例 源码:https://github.com/HK-Kevin/d...:demo:https://hk-kevin.github.io/d3...: 原理:通过zoom事件来重新绘制 ...
- zoom在css中的作用
zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...
- 安装zoom
ubuntu zoom下载地址:https://zoom.us/download?os=linux 安装: sudo apt-get install libxcb-xtest0 sudo dpkg - ...
随机推荐
- Wormholes 虫洞 BZOJ 1715 spfa判断负环
John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N (从1..N标号)块地 ...
- flask 的上下文管理
Flask的上下文对象 Flask有两种Context(上下文),分别是 RequestContext 请求上下文 Request 请求的对象,封装了Http请求(environ)的内容 Sessio ...
- [原创]在Centos7上搭建私有的Gitlab服务器
前言 Git作为后起之秀,在版本控制领域占据了头把交椅.Github作为托管式的代码仓库,从代码安全性和网络传输等各个方面考虑,对于个人和公司来讲,具有一定的局限性.Gitlab提供的不同版本的安装包 ...
- AMD、CMD/AMD与CMD的区别
http://blog.csdn.net/jackwen110200/article/details/52105493
- vue点击tab跳转页面,给点击的tab添加样式,且解决刷新以后点击的tab样式消失问题
<ul class="nij"> <li v-for="item in nav" @click="selectNav(item.ti ...
- centos 7 gitlab部署 以及汉化
=============================================== 2018-04-26 08:56:48 ============================== ...
- spring初始化bean的目的
初始化bean就是为了将所有需要的bean全部装载到容器里面,等我们需要用到哪个bean就将哪个bean从容器里面拿出来
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- webstorm预览时把浏览器地址localhost改成IP
可以通过 File --> Setting,搜索 deployment 点击 + 号 然后输入一个名称,选择:Local or mounted folder,点击 OK 接下来选择你的本地项目路 ...
- oracle 备份恢复篇(六)---基于12c的pdb备份与恢复
一,备份前提描述 SQL> show con_name CON_NAME ------------------------------ CDB$ROOT SQL> archive log ...