Question

每当我拖动一个HTML5滑块时，我现在卡在该部分，它将在滑块的顶部或底部显示缩略图/小图片。我的滑块是这样的......

 <input name="sliderStatus"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

但是如何做缩略图呢？任何例子？谢谢（：

Answer 1

据我了解，您希望根据输入range值更改缩略图大小。

您需要将onchange事件侦听器添加到您的范围输入并将其附加到某些回调，updateThumbnail，例如：

<input name="sliderStatus" onchange="updateThumbnail(this)"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

然后根据您的值在回调中，您可以更改缩略图宽度：

function updateThumbnail(rangeInput) {
    var myImage = document.getElementById('someImage');
    myImage.width = rangeInput.value;
    myImage.height = rangeInput.value;
}

<强>更新

根据您的评论，您需要更改范围输入中的step属性：步骤= “10”

例如，修改您的功能以显示您的图像：

function updateThumbnail(rangeInput) {
    var previousImage = document.getElementById('someImage' + (rangeInput.value - 10));
    if(previousImage) {
        previousImage.style.display = 'none';
    }
    var nextImage = document.getElementById('someImage' + rangeInput.value);
    nextImage.style.display = 'block';
}

图片的Html标记应为：

<img src="pathToThumbnail" id="someImage0" style="display: block;">
<img src="pathToThumbnail" id="someImage10" style="display: none;">
<img src="pathToThumbnail" id="someImage20" style="display: none;">
...
<img src="pathToThumbnail" id="someImage100" style="display: none;">

请参阅jsFiddle

上的演示

HTML5缩略图滑块

1 个答案: