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

ストレートHTMLが必要な場合は、MAPタグを使用し、HTML-GETを使用して関連する値を渡すことができます...それ以外の場合は、JavaScriptを少し使用しますか？

実際に既存のコードを探しましたか？

ここに何かがあります：http ：//www.w3schools.com/tags/ref_colorpicker.asp

コメントから：

w3schoolsは間違った誤解を招くサイトです。あらゆる種類の言語の参照として使用しないでください。PHPの場合はPHPマニュアルがあり、JavaScriptの場合はMozilla Developer Network（またはMDN）があります。w3schoolsを使用してはならない理由をさらに理解するには、w3fools.comを参照してください。

けっこうだ。それは単なる例でした。stackoverflowの[AskQuestion]ボタンを押すよりも、Googleでソースコードを見つける方が速いです。別のものがあります：直接リンクされたLGPLソースコードを持つhttp://jscolor.com/ 。目的に合わせて変更します。

于 2012-11-15T21:14:17.993 に答える
1

この画像をCANVASに転送できる場合は、ここから色を選択できます。

見る：

画像から色を選択するためのjQueryプラグインをお探しですか？

于 2012-11-15T21:14:45.133 に答える