scale 和 zoom,以及zoom的一些变态用法

zoomscale这两个东西都是用于对元素的缩放,一下是其中一些区别:

1、scale的缩小是以图片的中心,zoom的缩小是以图片的左上角。

2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;

3、注意:如果给zoom赋值两次,会使zoom的最终值为二者的乘积

关于zoom的一些变态用法:

1、如果zoom与position共同使用 的话,在zoom上的相对距离就不用再手动乘以zoom的比例了,页面会自动计算,做相对位置的

2、在用js给zoom赋值的时候,不能与css样式表里初始赋值相同,否则会无效

最后,zoom在手机端的有些应用还是挺好用哒~

时间: 2024-10-06 11:12:33

scale 和 zoom,以及zoom的一些变态用法的相关文章

2D转换下的zoom和transfor:scale的区别

一.什么是zoom 在我们做项目和查看别人的网页的时候总会看到在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是"变焦",虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放. 在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器. zoom的值的类型可以是: 1.数值:0~1              

【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.

浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly

1.浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能

用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果

1.写在前面 由于博客园本身不提供的上传图片后提供单击图片放大的功能,但是我们看到了有些博文却拥有放大图片的功能,自己也想拥有此项功能怎么办呢?博客园的好处就是提供了自定义功能了,具体是怎么实现的呢? 首先我们打开我的博客——管理——设置——申请到JS权限. 拿到权限后,接着去github下载zoom.js功能文件...... 下载解压取出zoom.js和zoom.css文件,将俩个文件上传到——我的博客——管理——文件:如图 点击进入文件,复制URL,如:https://blog-static

IScroll介绍--案例

一.下面简单介绍一下iScroll: iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件. 它可以在桌面,移动设备和智能电视平台上工作.它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验. iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.给它一个扫帚它甚至能帮你打扫办公室. 即使平台本身提供的滚动已经很不错,iSc

css3学习以及移动端开发基本概念的思考

html{ height:1000px; background-color: red; } @media screen and (width:2560px){ html{ background-color: blue; } } 注意:首先必须弄清楚,我们的width/height值得是浏览器的可视区域的大小(缩小或者放大浏览器会发生变化),而device-width和浏览器的缩放是没有关系的.如我的iMac是 2560*1440,那么当我缩小的时候颜色是红色,而全屏的时候颜色就是蓝色了!然而,如

android Gif播放

public class GifSurface extends SurfaceView implements Callback{ private Movie movie; private static int ZOOM = 2; public String path; private Handler handler = new Handler(); private Runnable runnable = new Runnable() { @Override public void run() {

mupdf实现常用图片转换为灰度图pnm

我要实现的工作是使用mupdf库转换pdf.jpeg.tif等文件为灰度图,转换完成的灰度图存放到内存中,而不是存为文件,在读取到内存中,主要是嵌入式系统中使用.下面是example.c,我加了我理解的注释,以及自己修改的地方.example.c全文 #include <mupdf/fitz.h> void render(char *filename, int pagenumber, int zoom, int rotation) { // Create a context to hold t

list-iscroll5.2

简介 iScroll是一个高性能,资源占用少,无依赖,多平台的JavaScript滚动插件. 它可以在桌面,移动设备和智能电视平台上工作.它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验. iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.给它一个扫帚它甚至能帮你打扫办公室. 即使平台本身提供的滚动已经很不错,iScroll可以在此基础上提供更多不