javascript - 使用拨号控件制作动画图像 (HTML/JavaScript/...)

Question

这是我想要实现的目标。

我有一系列从暗到白的图像(中间有各种灰度级)。我想在框架下方或框架上方(无关紧要)有一个刻度盘(如 slider )。当 slider 向左时，我显示黑色图像，当 slider 向右时，我显示白色图像，在中间的任何位置我选择介于两者之间的图像。

我对 Java Script 和 HTML5 的了解有限(因此我的问题在这里)，但我是一名程序员，所以我不害怕代码。我不要求一个完全开发的解决方案(除非存在)，因为我很乐意自己编写代码，但如果你能给我一些提示、指导和想法来完成这项工作，那就太好了。

• 如何创建 slider
• 当然，更重要的是我会选择要显示的正确图像。

如果可能的话，我想使用 JS 来做一些事情，而不是使用任何外部库。使用 2D Canvas 是否是同时绘制图像和 UI( slider )的解决方案？

谢谢。

Answer 1

下面用于在HTML5中创建一个10个固定点的 slider 。

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

现在您可以使用以下代码获取 slider 的值:

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

然后你可以相应地切换这个变量:喜欢，

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

     .....

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

希望这可以帮助您入门!这是一个非常基本的代码。