自定义缩放元素
位置:
首页 >
代码集锦[ 发布时间: 2025.11.3 作者: Admin 阅读: 92 ]
对业已存在的元素进行缩放，有多种实现方式。最容易想到的方法是利用CSS的 transform 的 scale() 函数，它接收一个倍数数值作为参数对元素进行原地缩放操作，不触发layout重置即不会重排DOM从而不影响排版，性能和用户体验都很理想，但它的应用需要一个前提：此前未对元素使用过 transform 属性，否则实现过程会复杂化——需要检测用过的一系列transform下的函数然后再设计一个插入 scale 机制。第二个想到的方法是使用 zoom 属性，这是一个非CSS标准下的属性，它来源于IE并被绝大多数现代浏览器一直支持（现在的Firefox也已支持）。使用 zoom 非常简单，像设置CSS属性值那样做即可，其值也是一个倍数数值。zoom 的特点主要有，一是会触发layout重置，引发DOM重排；二是缩放后以实际缩放的尺寸占位；三是它以元素的左上角为缩放中心，在Firefox下缩放中心点的表现会有一些古怪的现象。第三个想到的方法就是改变元素的宽高尺寸，本文要谈的就是这个。
设想是这样：获取元素的宽高尺寸，然后将宽高在 0.5~2 之间随机缩放。下面是完整的示例，里面创建了一个 ranZoom() 函数，可根据需要对函数进行适应性、扩展性修改：
<style>
.mum { margin: 20px auto; width: 800px; height: 600px; border: 1px solid gray; position: relative; }
.son { margin-bottom: 40px; width: 200px; height: 200px; background: tan; display: grid; place-items: center; position: relative; }
.son::before { position: absolute; content: attr(data-tip); width: 200px; left: 0; top: -30px; text-align: center; }
.zoom { zoom: 1.5; }
#btnZoom { position: absolute; bottom: 20px; right: 20px; }
</style>
<div class="mum">
<div class="son">200 * 200</div>
<div class="son" data-tip="200 * 200"></div>
<button id="btnZoom" type="button" value="">Zoom</button>
</div>
<script>
const ranZoom = (element) => {
const getSize = (str) => {
const match = str.match(/^([+-]?\d*\.?\d+)([a-zA-Z%]+)$/);
if (match) return {size: match[1], unit: match[2]};
return null;
};
const ranNum = (max,min) => (Math.random() * (max - min) + min).toFixed(2);
const zoom = ranNum(0.5, 1.5);
const style = window.getComputedStyle(element);
let width = style.getPropertyValue('width'),
height = style.getPropertyValue('height');
element.style.width = Math.ceil(getSize(width).size * zoom) + getSize(width).unit;
element.style.height = Math.ceil(getSize(height).size * zoom) + getSize(height).unit;
element.dataset.tip = element.clientWidth + ' * ' + element.clientHeight;
element.innerText = zoom;
};
const el = document.querySelectorAll('.son');
ranZoom(el[1]); // 缩放第二个子元素
btnZoom.onclick = () => ranZoom(el[1]);
</script>
ranZoom() 函数从 window.getComputedStyle API 中获得元素的宽高尺寸，是元素最终渲染的尺寸，所以，点击按钮对元素进行缩放时总是以元素的上一次实际尺寸为基准。
上述自定义的实现元素缩放方法，本质上和 zoom 属性实现的手段差不多。事实上，我们还有一个更为简单易用的做法，那就是利用 CSS 的 scale 属性。自 2022年8月起，所有现代浏览器均已完全支持此属性以及 rotate 和 translate，但 skew 尚未得到支持。这些原本是 transform 属性使用的函数升级为独立属性之后具备了足够的灵活性，例如，针对本文开头提出的 transform 问题不再存在，即当一个元素之前使用了 transform 的相关属性，我们仍然可以直接使用 scale 属性对之进行自由缩放，彼此间不存在任何冲突。
前一篇: tzMaker指令 lzRot() 绘制多叶草小播演示
下一篇: CSS : scale、rotate和translate属性应用演示
