在 JavaScript 中模仿浏览器缩放

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中模仿浏览器缩放

作者：迹忆客最近更新：2024/03/22 浏览次数：

本文将讨论如何使用 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。

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

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

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

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

上一篇：在 JavaScript 中检测操作系统

下一篇：在 JavaScript 中实现冲突检测

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享