jQuery如何加载图像的一部分

我有一个小问题。我需要创建圆形滑块，我没有找到任何可以帮助我的库，所以好像我需要自己写。
这里是我的问题：
enter image description here jQuery如何加载图像的一部分

我想创建上面的图片类似的东西，但我不能找到一种方法来加载gradiant的一部分。例如：

enter image description here

它甚至有可能在js中加载图像的一部分？

来源

2013-03-05 user1409508

你是如何显示出图像，你用''

我想你可以使用canvas元素并在图片上创建某种遮罩来完成此操作。不完全确定如何，但我相信这是可能的。 – 2013-03-05 20:05:28

http：// stackoverflow。com/questions/12673527/html5-canvas-use-image-as-mask – VoronoiPotato 2013-03-05 20:05:52

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

，如果你有几张图片来替换，我会在Photoshop做准备，并通过JavaScript和CSS的解决方案

，否则我不知道更改。

来源

2013-03-05 20:12:50 Bertrand

我同意画布选项。此外 - 基于你正在尝试做什么，我会建议 - http://anthonyterrien.com/knob/

我用图像自定义拨号本身，你可以设置显示部分的颜色。这可能不是您的全面解决方案 - 但理想情况下，您会指出正确的方向。

来源

2013-03-05 20:18:14 mikevoermans

既然你打算向后兼容，那么我会建立Bertrand的建议。。。你可以很容易地制作一个包含滑块各种“阶段”（即完成20％，完成40％等）的“精灵”图像，并在不同的CSS类中引用它的每个阶段。

通过这种方式，所有的阶段都会在页面加载时作为一个图像加载，您可以使用JavaScript更新显示滑块的元素的类，更新滑块的进度。

来源

2013-03-05 20:22:19 talemyn

将会有水平滑块，该值将显示在该圆形滑块上。所以它需要动态的方法（这是我的学校项目） – user1409508 2013-03-05 20:31:30

那么，理论上，你仍然可以做到这一点。。。你只需要在精灵文件中为滑块的每个可能的值设置一个状态。但是，如果滑块从1到100，并且可以以1为步进上下移动，则会产生非常大的精灵。虽然大精灵文件并不罕见。 – talemyn 2013-03-05 20:38:07

只要动态地改变它，那实际上会非常简单（尽管如此，大）。您将为每个滑块点创建一个样式，并将相应类名称的每个点的值作为一部分。这样，您可以直接将滑块值提供给更改类的函数，以作为更新类名的一部分。 – talemyn 2013-03-05 20:41:57

无法在纯Javascript中加载图像的一部分。相反，你可以使用精灵图像和背景的位置（download demo here）玩：

HTML：

<img id="loader" src="mask.png" />

CSS：

#loader { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: white url(sprite.png) no-repeat 0 0; 
}

的Javascript：

function getBgPos(pct) { 
    if (pct < 12.5) { return '0 0'; } 
    if (pct < 25) { return '-50px 0'; } 
    if (pct < 37.5) { return '-100px 0'; } 
    // and so on... 
}; 
jQuery('#loader').css('background-position', getBgPos(10));

mask.png ：

sprite.png：

enter image description here

来源

2013-03-07 13:40:20 leaf

jQuery如何加载图像的一部分

回答

相关问题