1. 首页
  2. 问答
  3. 范围有限的HTML颜色选择器

范围有限的HTML颜色选择器

2012-11-15 67 views
0

我需要为这不会是一个问题，一个网站一个颜色选择器，但我想主要有在此范围内挑选颜色滑块：范围有限的HTML颜色选择器

enter image description here

我将如何去做这件事？

来源

2012-11-15 Tom Allen

+2

嗯，有这样做的没有原生的方式，所以我想像多空格，用渐变背景，用JavaScript单击处理程序来计算它被点击的位置，从而确定该点的颜色。 –

回答

1

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

你是否真的四处寻找现有的代码？

这里的东西：http://www.w3schools.com/tags/ref_colorpicker.asp

从评论：

W3Schools的是一个错误的和误导性的网站。您不应将其用作任何种语言的参考。对于PHP，有PHP手册，用于JavaScript的 ，还有Mozilla开发者网络（或MDN）。请参阅 w3fools.com以进一步了解为什么您不应该使用w3schools。

不够公平。这只是一个例子。在google上查找源代码比在stackoverflow上按“Ask Question”按钮更快。这里有另一个：http://jscolor.com/与直接链接的LGPL源代码。修改以适合您的目的。

来源

2012-11-15 21:14:17 paddy

+0

我很高兴地采取JS解决方案，是的，我看过，但我只能找到让你从完整的RGB范围或单一颜色的较亮/较暗范围选择的解决方案。 –

+0

w3schools是一个错误的和误导性的网站。您不应该将其用作任何语言的参考。对于PHP，有[PHP手册]（http://php.net），对于JavaScript，有[Mozilla开发者网络（或MDN）]（https://developer.mozilla.org/）。请参阅http://w3fools.com以进一步了解为什么您不应该使用w3schools。 –

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-15 21:25:58

相关问题

 相关问题