有限范围的HTML颜色选择器

时间:2012-11-15 21:09:21

标签: html colors

我需要为一个不会有问题的网站创建一个颜色选择器,但我想要一个从这个范围中选择颜色的滑块:

enter image description here

我该怎么做?

3 个答案:

答案 0 :(得分:2)

我可以想象类似的东西。它可能会使用一些(很多)调整,但这是它的要点:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #color_picker {
            background: #e8f230; /* Old browsers */
            background: -moz-linear-gradient(left, hsla(63,88%,57%,1) 0%, hsla(0,0%,0%,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(63,88%,57%,1)), color-stop(100%,hsla(0,0%,0%,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* IE10+ */
            background: linear-gradient(to right, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f230', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
            height: 30px;
        }
    </style>
</head>
<body>

<div id="color_picker"></div>

<div id="target">Test</div>

<script>
    var picker = color_picker;
    var result = target;
    picker.onclick = function(e) {
        console.log(e);
        result.style.backgroundColor = "hsl(63, 88%, " + (50 - ((e.offsetX/picker.clientWidth) * 50)) + "%)";
    }
</script>

</body>
</html>

答案 1 :(得分:1)

如果你想要直接的HTML,你可以使用MAP标签并使用HTML-GET传递相关的值......否则,可能会有一些JavaScript?

您是否真的环顾四周寻找现有代码?

这是:http://www.w3schools.com/tags/ref_colorpicker.asp


来自评论:

  

w3schools是一个错误和误导性的网站。你不应该使用它   任何语言的参考。对于PHP,有PHP手册,   对于JavaScript,有Mozilla开发者网络(或MDN)。看到   w3fools.com进一步理解你为什么不应该使用w3schools。

足够公平。这只是一个例子。在谷歌上找到源代码比在stackoverflow上按“提问”按钮更快。这是另一个:http://jscolor.com/与LGPL源代码直接链接。修改以适合您的目的。

答案 2 :(得分:1)

如果您可以将此图像传输到CANVAS,您可以从此处选择颜色。

请参阅:

Looking for a jQuery plugin to pick a color from an image?