<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ColorPicker颜色选择器演示程序</title>
<style>
body,blockquote {margin:0;padding:0;font-size:12px;font-family:"微软雅黑",Verdana,Arial}
#container {width:900px;margin:0 auto;}
#image {margin-bottom:10px;}
blockquote {margin:10px 0;padding:0;}
.act1 {width:50px;}
pre {margin:0;padding:0;border:1px solid #ccc;margin-top:10px;padding-left:5px;}
</style>
</head>
<body>
<div id="container">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.colorpicker.js"></script>
<h2>ColorPicker颜色选择器演示 </h2>
<blockquote>
<font color="blue">默认：</font><br />
请输入颜色值：<input type="text" id="cp1" />
<pre>
$("#cp1").colorpicker({
fillcolor:true
});</pre>
</blockquote>
<blockquote>
<font color="blue">文字着色：</font><br />
请输入颜色值：<input type="text" id="cp2" />
<pre>
$("#cp2").colorpicker({
fillcolor:true,
success:function(o,color){
$(o).css("color",color);
}
});</pre>
</blockquote>
<blockquote>
<font color="blue">外部点击触发：</font><br />
请输入颜色值：<input type="text" id="cp3text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp3" style="cursor:pointer"/>
<pre>
$("#cp3").colorpicker({
fillcolor:true,
success:function(o,color){
$("#cp3text").css("color",color);
}
});</pre>
</blockquote>
<blockquote>
<font color="blue">外部鼠标Mouseover触发：</font><br />
请输入颜色值：<input type="text" id="cp4text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp4" style="cursor:pointer"/>
<pre>
$("#cp4").colorpicker({
fillcolor:true,
event:'mouseover',
success:function(o,color){
$("#cp4text").css("color",color);
}
});</pre>
</blockquote>
<blockquote>
<font color="blue">填充其它对象：</font><br />
请输入颜色值：<input type="text" id="cp5text" value=""/><img src="colorpicker.png" id="cp5" style="cursor:pointer"/>
<pre>
$("#cp5").colorpicker({
fillcolor:true,
event:'mouseover',
target:$("#cp5text")
});</pre>
</blockquote>
</div>
<script type="text/javascript">
$(function(){
$("#cp1").colorpicker({
fillcolor:true
});
$("#cp2").colorpicker({
fillcolor:true,
success:function(o,color){
$(o).css("color",color);
}
});
$("#cp3").colorpicker({
fillcolor:true,
success:function(o,color){
$("#cp3text").css("color",color);
}
});
$("#cp4").colorpicker({
fillcolor:true,
event:'mouseover',
success:function(o,color){
$("#cp4text").css("color",color);
}
});
$("#cp5").colorpicker({
fillcolor:true,
event:'mouseover',
target:$("#cp5text")
});
});
</script>
</div>
</body>
</html>
jQuery颜色选择器ColorPicker
版权申诉
5星 · 超过95%的资源 25 浏览量
2022-04-26
21:27:05
上传
评论
收藏 29KB ZIP 举报 
jQuery颜色选择器ColorPicker.zip （4个子文件） 
jquery.js 76KB
index.html 3KB jquery.colorpicker.js 6KB
colorpicker.png 181B资源评论
云应用分发ios签名2023-04-02资源有很好的参考价值，总算找到了自己需要的资源啦。
reg183
- 粉丝: 1811
- 资源: 1万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
