菜鸟笔记
提升您的技术认知

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})`;
}