类似于snapchat的jquery颜色选择器

Snapchat-like jquery color picker

本文关键字：颜色 选择器 jquery snapchat 类似于      更新时间：2023-09-26

我对创建一个像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>

我看到的每一个颜色选择器的例子都是Adobe的颜色选择器的再现，对于我的工作区域来说太大了，我还没有发现像Snapchats这样的滑动渐变足够小的颜色选择器。任何帮助在重建它非常感激，谢谢!

使用滑块(例如jQuery UI)，然后颜色简单地为hsl(slider * 360, 100%, 50%)(假设滑块返回的值从[0,1])。

如果你需要，你可以把它转换回rgb。

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

它是垂直的(没有读到你想要它水平)。

相关文章：