js实现div的缩放功能-ag真人游戏

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

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

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

效果图如下：

代码：

css:

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

html:

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：

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