js实现div的缩放功能

下面总结一下自己实现的两种缩放方式，一种是以左上角为缩放中心，一种是以元素中心为缩放中心。

一、以div左上角为缩放中心

使用滚轮事件mousewheel + zoom属性进行缩放

效果图如下：

 

代码：

css:

#div1 { border: 1px solid red; width: 200px; height: 200px; }

html:

<div id="div1" onmousewheel="scaleDom()"><div>

js:

function scaleDom(){ let div = document.getElementById('div1'); let zoom = parseInt(div.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if(zoom > 0) { div.style.zoom = `${zoom}%`} }

二、以div中心为缩放中心

使用滚轮事件mousewheel + scale属性进行缩放

效果图如下：

 

代码：

css：

.box1 { width: 200px;height: 200px;margin: 0 auto; text-align: center;line-height: 200px; border: 1px solid #000; } #div1 { border: 1px solid red; width: 50px; height: 50px; transform: scale(1);display: inline-block; }

html：

<div class="box1"> <div id="div1" onmousewheel="scaleDom()"></div> </div>

js：

function scaleDom() { let div = document.getElementById("div1"); let scale = parseFloat((div.style.transform || `scale(1)`).replace(/[^0-9.]/gi, '')) let size = event.wheelDelta / 1200; scale += size; if (scale >= 0.5) div.style.transform = `scale(${scale})`; }