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

这是我想实现的。用拨号控制动画图像（HTML/JavaScript/...）

我有一系列图像从黑色到白色（中间有各种灰度级）。我希望在框架下或框架上有一个拨号（如滑块）（这并不重要）。当滑块向左移动时，我显示黑色图像，当滑块位于右侧时，显示白色图像和中间的任何位置，我在其间选择一个图像。

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

如何更重要的是产生滑动，当然
我做我选择以显示正确的图像。

我想尽可能使用JS，而不是使用任何外部库。将使用2D画布是绘制图像和UI（滑块）的解决方案吗？

谢谢。

来源

2014-07-06 user18490

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

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

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

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

现在你可以用下面的代码获得滑块的价值一样，

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

    ..... 

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

希望这可以帮助你开始吧！这是一个非常基本的代码。

来源

2014-07-07 07:03:47 John

真是太爽了，谢谢你。 – user18490

事实上，你确实需要一些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>

来源

2014-07-07 07:41:28

这是一个非常酷的解决方案和有用的，但是，我提到灰色图像，使其简单，但图像“是”实际上是文件，...所以它不是关于从白色到黑色褪色，但实际上使用不同的图像（在文件中）为灰色的每个“级别”（其中每个图像/文件是不同的）。 – user18490

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

回答

相关问题