javascript - 如何使用滑块更改图像大小？

Question

我有这段代码，我想知道是否可以仅通过移动滑块来更改图像的大小：

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

有人可以帮忙吗？

Answer 1

您可以将 eventListener 添加到该范围，然后在该范围内应用您的逻辑来更改图像的尺寸。

const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);


function handleChange(e) {
  const img = document.getElementById("Elon");
  const {value, max} = e.target;
  img.style.width = `${value*max}px`;
  img.style.height = `${value*max}px`;
}

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

Answer 2

就像是：

document.getElementById("Slider").addEventlistener("change", (value) => {
  let image = document.getElementById("Elon");
  image.style.width = value;
  image.style.height = value;
});

请注意，这只是一个草图，如果您只是复制并粘贴它，可能无法正常工作。

Answer 3

在滑块更改时更改 img 宽度。像下面的东西

const sliderElem = document.getElementById('Slider');
const imageElem = document.getElementById('image');

function sliderChange() {
  const width = image.getAttribute('width');
  image.setAttribute("width", Number(width) + Number(sliderElem.value));

}

<div class="slidecontainer">
  <input onChange="sliderChange()" type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img id="image" width="150" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

Answer 4

您需要为此使用一些 javascript 这是您可以运行并查看的代码。如果您想要更多缩放，则根据您的选择而不是 x*10 写入 20 或 30。

document.getElementById("Slider").oninput = function changeImageSize(){
         var x = document.getElementById("Slider").value;
         document.getElementById("Elon").style.height=String(x*10) + "px";
        }

<div class="slidecontainer">
        <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">