我需要为一个不会有问题的网站创建一个颜色选择器,但我想要一个从这个范围中选择颜色的滑块:
我该怎么做?
答案 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)