3

我有一个小问题。我需要创建圆形滑块，我没有找到任何可以帮助我的库，所以似乎我需要自己编写它。
这是我的问题：
在此处输入图像描述

我想创建类似上图的东西，但我找不到加载部分渐变的方法，例如：

在此处输入图像描述

甚至可以在js中加载部分图像吗？

4

4 回答 4

2

如果您不需要动态替换图像，我建议您在 Photoshop 等图像工具中进行准备。

如果您要替换的图像很少，我会在 Photoshop 中准备它们并通过 javascript 和 css 解决方案更改它们

否则我不知道。

于 2013-03-05T20:12:50.847 回答
2

没有办法在纯 JavaScript 中加载图像的一部分。相反，您可以使用精灵图像并使用背景位置：

function getBgPos(pct) {
  if (pct < 12.5) { return '0 0'; }
  else if (pct < 25) { return '-100px 0'; }
  else if (pct < 37.5) { return '-200px 0'; }
  else if (pct < 50) { return '-300px 0'; }
  else if (pct < 62.5) { return '-400px 0'; }
  else if (pct < 75) { return '-500px 0'; }
  else if (pct < 87.5) { return '-600px 0'; }
  else if (pct < 100) { return '-700px 0'; }
  else { return '-800px 0'; }
};

i = 0;
setInterval(function () {
  jQuery('#loader').css('background-position', getBgPos(i));
  i += 12.5; if (i > 100) i = 0;
}, 500);
#loader {
  display: block;
  width: 100px;
  height: 100px;
  background: yellow url(https://i.stack.imgur.com/Xsf4k.png) no-repeat 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loader" src="https://i.stack.imgur.com/ArcTX.png" />

于 2013-03-07T13:40:20.633 回答
1

由于您要向后兼容，因此我将根据 Bertrand 的建议进行构建。. . 您可以轻松地制作一个“精灵”图像，其中包含滑块的所有各种“阶段”（即完成 20%、完成 40% 等），并在不同的 CSS 类中引用它的每个阶段。

这样，所有阶段都将在页面加载时作为一个图像加载，并且您可以使用 JavaScript 更新显示滑块的元素的类，从而更新滑块的进度。

于 2013-03-05T20:22:19.207 回答
0

我同意画布选项。另外-根据您要尝试做的事情，我会推荐-http://anthonyterrien.com/knob/

我用图像自定义了表盘本身，您可以设置显示部分的颜色。它可能不是您的完整解决方案 - 但理想情况下会为您指明正确的方向。

于 2013-03-05T20:18:14.527 回答