Question

这是我想要实现的目标。

我有一系列从黑暗到白色的图像（中间有各种灰度级）。我想在框架下面或框架上有一个表盘（如滑块）（没关系）。当滑块在左边时，我显示黑色图像，当滑块在右边时，我显示白色图像和中间的任何位置我在中间选择图像。

我对Java Script和HTML5的了解有限（因此我的问题在这里），但我是程序员，所以我不怕代码。我不是要求一个完全开发的解决方案（除非存在），因为我很乐意自己编写代码，但如果你能给我一些提示，方向和想法来做这项工作，那将会很棒。

如何创建滑块
当然更重要的是我选择要显示的正确图像。

如果可能，我想使用JS做一些事情，而不是使用任何外部库。使用2D画布是否能够同时绘制图像和UI（滑块）？

谢谢。

Answer 1

以下用于在HTML5中创建10个固定点的滑块。

<input id="barslidesize" type="range"  min="1" max="10">

现在您可以使用以下代码获取滑块的值：

var currentPos = document.getElementById("barslidesize").value;

然后你可以相应地切换这个变量：等，

 switch (currentPos)
 {
  case "1":
    //do this
    break;
  case "2":
    //do that;
    break;

     .....

  case "10":
    //do neccessary;
    break;
 }

希望这有助于您开始使用！这是一个非常基本的代码。

Answer 2

实际上你确实需要很少的Javascript。你可以用画布做到这一点，但我不认为这是最好的解决方案。

这里我将白色图像放在黑色图像的前面。然后，我使用范围来更改白色图像的不透明度，这将呈现为灰色。

CSS：

<style type="text/css">
    .greyslidercontainer {
        padding: 0px;
        background: url(black.png) no-repeat;
    }

    .greyslidercontainer img {
        display: block;
        opacity: 1;
    }
</style>

HTML：

<div class="greyslidercontainer">
    <img src="white.png" />
    <input
        type="range"
        min="0.0"
        max="1.0"
        step="0.01"
        value="1"
        onchange="this.previousElementSibling.style.opacity = this.value"
    />
</div>

使用拨号控件动画图像（HTML / JavaScript / ...）

2 个答案: