<!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>
</div>
</body>
</html>
js写的颜色选择器控件,功能强大,有现成demo直接调用。
1星 需积分: 38 160 浏览量
2017-10-13
10:28:21
上传
评论
收藏 62KB RAR 举报
lpchh
- 粉丝: 0
- 资源: 8
最新资源
- STM32单片机FPGA毕设电路原理论文报告嵌入式系统工程专业单片机课程教学改革与实践
- STM32单片机FPGA毕设电路原理论文报告嵌入式单片机与PC机组合应用
- STM32单片机FPGA毕设电路原理论文报告嵌入式单片机PPP协议的应用研究
- STM32单片机FPGA毕设电路原理论文报告嵌入式USB主机接口在温室环境监控中的应用研究
- STM32单片机FPGA毕设电路原理论文报告嵌入式usb数据采集系统
- 10个LED.pdsprj
- BaiduyunSpider-master.zip
- STM32单片机FPGA毕设电路原理论文报告嵌入式TCPIP协议单片机在网络通信中的应用
- localsend文件传输工具mac端
- STM32单片机FPGA毕设电路原理论文报告嵌入式linux下基于单片机的矩阵键盘与ARM的串行通信
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈