在 JavaScript 中模仿浏览器缩放

Sahil Bhosale 2023年10月12日

JavaScript JavaScript Scale

本文将讨论如何使用 JavaScript 中 transform 属性的 scale 方法缩放或缩放特定元素。

使用 JavaScript 中的 `scale` 方法模拟浏览器缩放

transform 属性允许你操作 HTML 元素，如旋转、缩放、倾斜或平移，并应用 2D 或 3D 转换。

使用此属性没有任何害处，因为所有浏览器都支持它。transform 属性有一个可用于实现缩放的 scale 方法。

scale 方法采用两个值 - sx 和 sy。

sx 指定你想要向 x 轴缩放多少。sy 设置你想要向 y 轴缩放多少。

两个默认值都是 1，但 sy 值是可选的。因此，如果你不定义 sy，它将采用 sx 值。

让我们举个例子来看看我们如何使用这个属性来缩放 JavaScript 中的 HTML 元素。

下面，我们在容器内有一个带有方形 ID 的 div 元素。这是我们将应用缩放或缩放属性的元素。

然后我们还有一个 ID 为 btns 的 div，其中包含我们所有的按钮。我们在页面中添加了三个按钮：放大、缩小和重置。

放大按钮有 in 类，缩小按钮有 out，重置按钮有 reset。我们添加了所有三个按钮的 onclick 事件，因此每当用户单击这些按钮时都会调用一个函数。

<body>
    <h1>Zoom the below square</h1>
    <div class="container">
        <div id="square"></div>
        <div class="btns">
            <button class="in" onclick="zoomIn()">Zoom In</button>
            <button class="out" onclick="zoomOut()">Zoom Out</button>
            <button class="reset" onclick="reset()">Reset</button>
        </div>
    </div>

    <script src="./script.js"></script>
</body>

在我们的 CSS 中，我们刚刚为正方形提供了基本属性，如宽度、高度、背景和边距，并注意我们使用了 em 而不是 px。利用像 em 和 rem 这样的相对单位是制作响应式设计的好习惯。

在容器 div 中，我们有两个独立的 div 元素。我们希望它们并排显示，因此我们在容器元素上使用了 display: flex 属性。

我们还想在元素前后留出一些间距，为此，我们使用了 flexbox 的 justify-content 属性。

并且垂直对齐按钮，我们将 flex-direction 更改为列。默认情况下，此属性的值为 row。

你可以在 style 标签内编写下面的 CSS 或创建一个新文件来编写 CSS。

#square{
    width: 10em;
    height: 10em;
    background-color: tomato;
    margin: 4em;
}

.container{
    display: flex;
}

.btns{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

现在，是时候深入研究 JavaScript。

首先，我们必须通过 getElementById() 方法获取使用其 ID 创建的 square 的引用，然后将其存储在变量 square 中。为了跟踪放大和缩小值，我们将使用变量 counter 并将其初始化为 1。

我们将 counter 变量值设置为 1，因为 HTML 元素和 scale 方法的默认比例也是 1，即 100%。我们将在 JavaScript 文件中定义三个函数 zoomIn()、zoomOut() 和 reset()。

var square = document.getElementById('square');

var counter = 1;

function zoomIn() {
  if (counter < 2) {
    counter += 0.1;
    square.style.transform = `scale(${counter})`;
  }
}

function zoomOut() {
  if (counter > 0.2) {
    counter -= 0.1;
    square.style.transform = `scale(${counter})`;
  }
}

function reset() {
  square.style.transform = 'scale(1)';
  counter = 1;
}

zoomIn 函数将负责将方形 div 元素放大到 scale(2)，即最大 200%。在这个函数中，我们的条件是如果 counter 变量的值小于 2，我们将把 counter 变量增加 0.1。

然后我们将使用 style.transform 设置 transform 属性，一个正方形的 CSS 属性。对于这个属性，我们将赋值 scale() 作为字符串文字，然后将其中的计数器变量作为 scale(${counter}) 传递。

请注意，我们使用反引号而不是双引号作为字符串文字。这允许我们在字符串中传递一个变量。

zoomOut() 函数将负责将方形 div 元素缩小到 scale(0.1)，即 10% 最小值。

在这里，我们还添加了一个条件，如果 counter 变量的值大于 .2，那么只有我们将 counter 变量的值递减，并将 counter 变量的值设置为 square 的 transform 属性.

请注意，如果你将比例设置为零，则该元素将不会在屏幕上可见，这就是我们将比例值设为 0.1 以上的原因。

rest() 函数会将方形 div 元素的比例更改回其原始大小 scale(1)。另外，不要忘记将计数器变量的值设置回 1。

如果你运行代码，它将如下所示。

JavaScript 缩放动画

缩放值将在 0.1 到 2 之间。默认情况下，它将设置为 1，即 100%。

CSS 中的另一个可用属性称为 zoom 属性也可用于实现缩放。但这不是在生产网站上实现缩放的标准方式。

这可能会产生问题，因为网站上的某些元素和动画可能无法按预期工作。

作者： Sahil Bhosale

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

使用 JavaScript 中的 scale 方法模拟浏览器缩放

使用 JavaScript 中的 `scale` 方法模拟浏览器缩放