1

我有兴趣创建一个类似于 iOS Snapchat 中的颜色选择器。这是一个非常漂亮的纤细垂直条，我希望它是水平的，在这里看到。

我一直在使用像这样的单个框，但更愿意使用像 Snapchat 那样的滑块/渐变：

js：

    $(function() {
    $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() {
        $('#tools').append("<a href='#colored_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> ");
    });

html:

        <div id='tools'></div>

我见过的每个颜色选择器示例都是 Adob​​e 的颜色选择器的再版，这对于我的工作区域来说太大了，而且我还没有找到像 Snapchats 这样的滑动渐变足够小的东西。非常感谢您对重建它的任何帮助，谢谢！

4

1 回答 1

2

使用一个滑块（例如 jQuery UI）然后颜色就是hsl(slider * 360, 100%, 50%)（假设滑块从 [0,1] 返回值）。

如果需要，您可以将其转换回 rgb。

http://jsbin.com/utumab/1/edit

它是垂直的（没读过你想要它水平）。但改变是微不足道的。

于 2013-06-11T20:05:18.013 回答