如何使用滑块更改图像大小?
How to change image size with slider?
我有这段代码,我想知道是否可以仅通过移动滑块来更改图像的大小:
<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">
有人能帮忙吗?
类似于:
document.getElementById("Slider").addEventlistener("change", (value) => {
let image = document.getElementById("Elon");
image.style.width = value;
image.style.height = value;
});
注意,这只是一个草图,如果您只是复制并粘贴它可能无法工作。
您可以向范围添加一个事件监听器,然后在那里应用您的逻辑来更改图像的尺寸。
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">
更改滑块时更改 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">
你需要为此使用一些 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">
我有这段代码,我想知道是否可以仅通过移动滑块来更改图像的大小:
<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">
有人能帮忙吗?
类似于:
document.getElementById("Slider").addEventlistener("change", (value) => {
let image = document.getElementById("Elon");
image.style.width = value;
image.style.height = value;
});
注意,这只是一个草图,如果您只是复制并粘贴它可能无法工作。
您可以向范围添加一个事件监听器,然后在那里应用您的逻辑来更改图像的尺寸。
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">
更改滑块时更改 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">
你需要为此使用一些 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">