您的位置:首页 - 教程 - 网页特效 - 正文
jQuery点击文本框颜色拾取器的多种方式
效果展示

源码下载:
http://hovertree.com/h/bjaf/yxrucn23.htm

代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery点击文本框颜色拾取器 - 何问起</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/84/css/main.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/84/css/jquery.bigcolorpicker.css" />
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/84/js/jquery.bigcolorpicker.min.js"></script>
<script type="text/javascript">
$(function(){
$("#c1").bigColorpicker("c1");
$("#btn").bigColorpicker("c2");
$("#img").bigColorpicker(function(el,color){
$(el).css("background-color",color);
});
$(".ku").bigColorpicker(function(el,color){
$(el).css("background-color",color);
});
$("#c5").bigColorpicker("c5","L",6);
});
</script>
<style type="text/css">
.demo{width:300px; margin:20px auto}
.demo p{padding-bottom:10px}
#img{width:25px;height:25px;display:block; border:1px solid #d3d3d3;}
.ku{width:25px;height:25px;display:block; border:1px solid #d3d3d3; float:left; margin-right:10px}
.clear{clear:both}
</style>
</head>

<body>

<div id="main">

<div class="demo">
<p>1.点击输入框选取颜色</p>
<input type="text" id="c1">
</div>
<div class="demo">
<p>2.点击选色按钮选取颜色</p>
<input type="text" id="c2"><input id="btn" type="button" value="选色" />
</div>
<div class="demo">
<p>3.点击方框选取颜色</p>
<a href="javascript:void(0)" id="img"></a>
</div>
<div class="demo">
<p>4.选取多个颜色</p>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<div class="clear"></div>
</div>
<div class="demo">
<p>5.自定义颜色块个数</p>
<input type="text" id="c5">
</div>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、FireFox、Chrome、Safari、Opera、Edge、IE9和新版IE等.</p>
<p>来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/8b0vc3uu.htm">代码说明</a></p>
</div>

</div>
</body>
</html>

评论: