使用Dial控件动画图像(HTML/JavaScript/…)

Animating Images with a Dial Control (HTML/JavaScript/...)

本文关键字：JavaScript HTML Dial 控件 动画 图像 使用      更新时间：2023-09-26

这是我想要实现的。

我有一系列从深色到白色的图像(中间有各种灰度)。我想要一个表盘(像滑块一样)放在镜框下面或上面(没关系)。当滑块在左边时，我显示黑色图像，当滑块在右边时，我显示白色图像，在中间的任何位置，我选择一个介于两者之间的图像。

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

    如何创建滑块
  • 当然更重要的是我选择正确的图像来显示。
如果可能的话，我想使用JS做一些事情，而不是使用任何外部库。使用2D画布是同时绘制图像和UI(滑块)的解决方案吗?

谢谢。

下面的代码用于在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;
 }

希望这能帮助你开始!这是一个非常基本的代码

事实上，您确实需要很少的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>
相关文章：