Question

这是我的fiddle，（查看zoomInOut按钮。）

对于我的绘图应用程序，我需要一个按钮，以便按下div #layerTown（包含1 img和2 canvas）内的内容缩放2倍大小。（它会变得像素化，那就OK！）。在下一次按下它应该回到自然视图（缩放：1;）。

谷歌搜索后，我提出了两种方法：

（我怎么能把它连接到这里的按钮？：主动不做这项工作）
```
#layerTown {
    zoom:2;
}
```

这非常接近我想要的东西，但鼠标非常紧张＃34;并且＆＃34;奇怪＆＃34;当我接近画布的底部时。

在js中使用css（查看jsfiddle第79行）。出来很糟糕。看看小提琴。

var layerTown = document.querySelector("#layerTown");
var setZoom = function() {
    if (!zoom) {
        zoom = true;
        layerTown.style.cssText = "zoom:2;";
    } else {
        zoom = false;
        layerTown.style.cssText = "zoom:1;";
    }
}

如何才能让这个按钮正常工作，以便人类可以使用＃34;只是缩放，鼠标仍能正常工作？

Answer 1

您可以使用css转换：

#layerTown {
  transition: transform .3s;
  transform-origin: center center;
}

#layerTown.active {
  transform: scale(2);
}

然后使用JS按钮单击将一个活动类添加到图层：

$(button).on('click', function() {
  $('#layerTown').toggleClass('active');
});

（这是一个jQuery解决方案）。

Answer 2

这个是使用纯Js和CSS

＆＃13;

document.querySelector("#button").addEventListener("click", function() {
  document.querySelector("#layerTown").classList.toggle("active")
});

＆＃13;

#layerTown {
  transition: transform .3s;
  transform-origin: center center;
  height: 100px;
  width: 100px;
  background-color: red;
}

#layerTown.active {
  transform: scale(2);
}

＆＃13;

<div id="layerTown">
</div>
<br/><br/><br/><br/><br/><br/><br/>
<button id="button">Click Me!</button>

＆＃13;

这个是使用纯CSS

＆＃13;

#layerTown {
  transition: transform .3s;
  transform-origin: center center;
  height: 100px;
  width: 100px;
  background-color: red;
}

#layerTown:hover {
  transform: scale(2);
}

＆＃13;

<div id="layerTown"></div>

＆＃13;

Answer 3

在@sdvnksv和@Mr Bones的宝贵帮助下。我找到了一个解决方案：New fiddle with Zoom

保持＆＃34;人类＆＃34;在原地，我添加了一个迷你透明广场。（thnx先生给Bones先生）。我真的不明白为什么我需要这个迷你广场。

CSS

  string num = "abC02";
  int mathBase = 16;

  int result = num
    .Select(c =>
         c >= '0' && c <= '9' ? c - '0'
       : c >= 'a' && c <= 'z' ? c - 'a' + 10
       : c >= 'A' && c <= 'Z' ? c - 'A' + 10
       : 0)
    .Aggregate((s, a) => s * mathBase + a);

  // 703490
  Console.Write(result);

然后我反正使用jQuery（太复杂了） - （感谢sdvnksv）

#layerTown {
    transition: transform .3s;
    transform-origin: center center;

    height: 1px;
    width: 1px;
    background-color: "rgba(255, 255, 255, 1)";
}

#layerTown.active {
    transform: scale(2);
}

感谢您的投入。它真的很好看！

缩放div的按钮（包含图像和画布）

3 个答案: