Question

我有兴趣创建一个像iOS Snapchat中那样的颜色选择器。这是一个非常漂亮的细长垂直条，我想要横向，seen here。

我一直在使用像这样的单个盒子，但更像是像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>

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

Answer 1

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

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

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

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

Snapchat-like jquery颜色选择器

1 个答案: