JavaScript拾色器ColorPicker编写实战（仿Photoshop）资源-CSDN下载

共8个文件

png：4个

js：2个

html：1个

需积分: 18 170 浏览量 2010-09-19 08:16:38 上传评论收藏 36KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Getcolor.rar （8个子文件）

codefans.net

Getcolor

reset.css 759B

c_p_h.png 3KB

c_p_h_pointer.png 3KB

dkTools.js 12KB

index.html 3KB

c_p_hover.png 18KB

c_p_pointer.png 3KB

colorPicker.js 7KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>颜色选取 Download by http://www.codefans.net</title> <link type="text/css" rel="stylesheet" href="reset.css" /></head> <style> /*color picker style*/ #dk_color_picker{ width:300px; border:1px solid #ccc; overflow:hidden; padding:10px; background:#f6f6f6; position:absolute;} #dk_color_picker h2.c_p_header{ line-height:24px; font-size:14px;} #dk_color_picker .c_p_c{ width:300px;} #dk_color_picker .c_p_sv{width:255px;height:255px; background:url(c_p_hover.png); background-color:#f00; position:relative; float:left; overflow:hidden; /*hack for IE6*/ _background:none;_background-color:#f00;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c_p_hover.png', sizingMethod='scale');} #dk_color_picker .c_p_pointer{ display:block; width:16px; height:16px; background:url(c_p_pointer.png); position:absolute; left:-8px; top:-8px; /*hack for IE6*/ _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c_p_pointer.png', sizingMethod='scale'); } #dk_color_picker .c_p_h{width:35px; height:255px; background:url(c_p_h.png) center center no-repeat; float:right; position:relative;} #dk_color_picker .c_p_h_pointer{width:35px; height:8px; background:url(c_p_h_pointer.png); display:block; position:absolute; top:-4px; line-height:1px; font-size:0; /*hack for IE6*/ _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c_p_h_pointer.png', sizingMethod='scale'); } #dk_color_picker .c_p_status{ margin-top:4px;} #dk_color_picker .c_p_status span{ display:inline-block; width:60px; line-height:24px;} #dk_color_picker .c_p_status input{ margin-left:4px;} /*page style*/ fieldset{ margin:10px 40px; border:1px solid #ccc; padding:10px;} fieldset p label{ display:block; line-height:24px;} .f{-moz-background:#f00;} </style> </head> <body> <fieldset class="f"> <legend>填写信息</legend> <p><label>名称</label><input type="text" id="name" name="name" /></p> <p><label>类别</label><input type="text" id="category" name="category" /></p> <p><label>属性</label> <textarea name="property" id="property"></textarea> </p> <p><label>颜色_1</label> <input type="text" id="txt_color" /> 点击输入框打开颜拾色器 </p> <p><label>颜色_2</label> <input type="text" id="color_1" /> 点击输入框打开颜拾色器 </p> </fieldset>  <script type="text/javascript" src="dkTools.js"></script> <script type="text/javascript" src="colorPicker.js"></script> <script type="text/javascript"> colorPicker.setInputs(['txt_color','color_1']); /* colorPicker.render(20,20); colorPicker.callBackFuncs.push(function(){ alert(colorPicker.colorCode); }); */ </script> </body> </html>

评论收藏

内容反馈