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

标签 javascript html css

这是我想要实现的目标。

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

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

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

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

谢谢。

最佳答案

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

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

关于javascript - 使用拨号控件制作动画图像 (HTML/JavaScript/...),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24600756/

相关文章:

javascript - 从输入中提取图像

javascript - 如何将javascript html dom文档存储到本地存储

javascript - 我正在尝试在示例 html 中添加 google adsense,但它在控制台中显示错误?

html - 像自动完成 css 编辑器一样的 Firebug

javascript - 背景更改时动态更改文本颜色(javascript)

CSS Zoom 1 自动添加到文档

javascript - 获取 [object, Object] 而不是整个用户数据。这意味着什么?

javascript - OnMouseOver 下拉不来

html - Bootstrap 字体在移动设备上缩放太小

html - Mobile Safari 以不同方式呈现 CSS - 任何修复?