0

I need to create a colour picker for a site which wouldn't be a problem, but I want to essentially have a slider that picks colours from this range:

enter image description here

How would I go about this?

4

3 回答 3

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>
于 2012-11-15T21:25:58.827 回答
1

If you want straight HTML, you could use the MAP tag and pass the relevant value using HTML-GET... Otherwise, a bit of JavaScript perhaps?

Have you actually looked around for existing code?

Here's something: http://www.w3schools.com/tags/ref_colorpicker.asp

From comments:

w3schools is a wrong and misleading site. You shouldn't use it as reference for any sort of language. For PHP, there's the PHP Manual, for JavaScript, there's Mozilla Developer Network (or MDN). See w3fools.com to further understand why you should never use w3schools.

Fair enough. It was simply an example. It's faster to find source code on google than to press the "Ask Question" button on stackoverflow. Here's another: http://jscolor.com/ with directly linked LGPL source code. Modify to suit your purposes.

于 2012-11-15T21:14:17.993 回答
1

If you can transfer this image into CANVAS, you can pick the color from here.

See:

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

于 2012-11-15T21:14:45.133 回答