Javascript动画按输入类型范围调整两个div的大小答案

【问题标题】：Javascript animation Resize two divs by input type rangeJavascript动画按输入类型范围调整两个div的大小
【发布时间】：2021-04-08 20:09:00
【问题描述】：

我正在尝试寻找一种方法，如何通过拖动<input type="range"> 来调整两个 div 的大小。基本上我想要做的是当用户拖动input 时，一个 div 会变大而另一个会变小.. 反之亦然。 您可以运行下面的 sn-p。

我是 javascript 动画的新手，我不知道如何或从哪里开始以及在互联网上搜索什么。随时向我推荐教程或视频，感谢您的宝贵时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>


<div class="container mt-5 pt-5 text-center">
    <div class="row">

        <div class="col-6">
            <div style="background-color:red; width:100%; height:100%">
                <h3>Test</h3>
            </div>
        </div>

        <div class="col-6">
            <div style="background-color:red; width:100%; height:100%">
                <h3>Test</h3>
            </div>
        </div>

        <input type="range" class="mt-5">
    </div>

</div>




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

【问题讨论】：

标签： javascript css animation

【解决方案1】：

您可以计算滑块的填充量并将这些百分比传递给您的div 元素。

// Define min and max value that can be entered
const MIN = 0;
const MAX = 100;

// Get elements
const slider = document.getElementById('range-slider');
const leftBlock = document.getElementById('left');
const rightBlock = document.getElementById('right');

// Force min and max values (could also be added inside your HTML)
slider.setAttribute('min', MIN);
slider.setAttribute('max', MAX);

// Start halfway
slider.value = MAX / 2;

// Fires when the value of the slider changes
slider.addEventListener('input', ({ target }) => {
  // Calculate percentages
  const leftInPercentage = Math.round(target.value / MAX * 100);
  const rightInPercentage = 100 - leftInPercentage;
  
  // Update width
  leftBlock.style.width = `${leftInPercentage}%`;
  rightBlock.style.width = `${rightInPercentage}%`;
  
  // For debugging purposes
  console.clear();
  console.log(`Value: ${target.value}`);
  console.log(`Percentage: ${leftInPercentage}% - ${rightInPercentage}%`);
});

.block {
  width: 50%;   /* Since we start halfway in our JS we need to match our CSS */
  height: 100%;
  float: left;
}

#left {
  background: red;
}

#right {
  background: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>


<div class="container mt-5 pt-5 text-center">
    <div class="row">

        <div class='col-12'>
            <div id="left" class="block">
                <h3>Test</h3>
            </div>

            <div id="right" class="block">
                <h3>Test</h3>
            </div>
        </div>
        
        <div class='col-12'>
            <input id="range-slider" type="range" class="mt-5">
        </div>
    </div>
</div>




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

【讨论】：