javascript - 自定义的拾色器
本文介绍了javascript - 自定义的拾色器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
拾色器长这样，用input的话都是默认样式，长这样的话怎么做
解决方案
@伐木北山 的答案很接近了，但是如果非要一样的话可以选择用div做，把所有要的颜色值放到一个数组里，每个小div获取数组中对应的颜色值，这个会比较麻烦，但是能做出来`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>color</title>
<style media="screen">
.box{
width: 200px;
height: 200px;
border: 1px solid red;
margin:300px auto;
position: relative;
}
.colorMenu{
width: 60px;
height: 27px;
float:left;
position: relative;
text-indent: 5px;
cursor: default;
line-height: 27px;
font-size: 14px;
}
.colorMenu:hover{
background: #d8e1f2;
cursor: default;
font-size: 14px;
}
#triangle-top{
width:0px;
height:0px;
float: left;
border:8px solid;
position: absolute;
top: -5px;
right: 5px;
border-color:#000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.container{
width: 155px;
height: 350px;
border: 1px solid green;
position: absolute;
top:27px;
display: none;
}
.container div.preColor{
width: 10px;
height: 10px;
margin-left: 5px;
margin-top: 5px;
background: blue;
float: left;
margin-bottom: 5px;
}
.container div.preColor:hover{
border: 1px solid orange;
width: 8px;
height: 8px;
}
.arrColor div{
width: 10px;
height: 12px;
margin-left: 5px;
background: blue;
float: left;
}
.container div.txt{
background: #eee;
width: 100%;
height: 25px;
line-height: 25px;
text-indent: 10px;
font-size: 14px;
cursor: default;
}
.clear{
clear: both;
}
.normColor{
width: 100%;
height: 15px;
border-bottom: 1px solid #d4d4d4;
margin: 2px auto;
}
.normColor div{
width: 10px;
height: 10px;
margin-left: 5px;
margin-top: 2px;
background: green;
float: left;
}
.moreColor{
width: 100%;
height: 25px;
text-indent: 10px;
line-height: 25px;
font-size: 14px;
cursor: default;
position:absolute;
}
input.moreColor{
width: 150px;
opacity: 0;
}
input.moreColor:hover{
background: #d8e1f2;
cursor: default;
}
.color:hover{
width: 8px;
height: 10px;
border: 1px solid #f29436;
}
</style></head>
<body>
<div class="box">
<div class="colorMenu">填充<p id='triangle-top'></p></div>
<div class="container">
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="preColor color"></div>
<div class="arrColor">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
<div class="clear"></div>
<div class="txt">标准颜色</div>
<div class="normColor">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
<div class="moreColor">
更多颜色
</div>
<input type="color" class="moreColor">
</div>
</div></body>
</html>
<script src="http://ajax.googleapis.com/aj...
<script type="text/javascript">
$(function(){
$(".colorMenu").bind("click",function(e){
var arr = [
"#ffffff","#000000","#1f497d","#9bbb59","#969696","#4f81bd","#c0504d","#8064a2","#4bacc6","#f79646",
"#ebebeb","#7e7e7e","#e7e9ec","#eff3ea","#efefef","#e9edf4","#f4e9e9","#edeaf0","#e9f1f5","#fdefe9",
"#d7d7d7","#696969","#cccfd7","#dee7d1","#dddddd","#d0d8e8","#e8d0d0","#d8d3e0","#d0e3ea","#fcddcf",
"#c2c2c2","#595959","#abb1bf","#cbdab5","#c9c9c9","#b2c1db","#dcb3b2","#c0b8ce","#b1d2df","#fac9b0",
"#afafaf","#454545","#7f8aa3","#b5cb90","#b2b2b2","#8ca5cc","#cf8c8b","#a495ba","#8bc0d3","#f9b289",
"#9b9b9b","#303030","#1a3f6d","#88a44d","#838383","#4471a6","#a94543","#70578e","#4197ae","#da833d",
"#868686","#191919","#14335a","#71893f","#6d6d6d","#385d8a","#8c3836","#5c4776","#357d91","#866d31",
"#c00000","#ff0000","#ffc000","#ffff00","#92d050","#00b050","#00b0f0","#0070c0","#002060","#7030a0"
];
$.each(arr,function(index,element){
$(".color").eq(index).css("background",arr[index]);
});
$(".container").show();
e.stopPropagation();
});
$(document).click(function(){
$(".container").hide();
});});
</script>
`
这篇关于javascript - 自定义的拾色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
