网络编程
位置:首页>> 网络编程>> JavaScript>> 写了一个小巧的jquery拾色工具

写了一个小巧的jquery拾色工具

作者:fanxiaojie 来源:韦伯花园的魔法师 发布时间:2009-12-21 14:22:00 

标签:拾色器,工具,取色器,源码

写了一个小巧的jquery拾色工具,代码简单得不得了,只有这么几行:

(function($){ 
$.fn.pickColor=function(callback)
 {
 var itemColors=["#FFFFFF","#E5E4E4","#D9D8D8","#C0BDBD","#A7A4A4","#8E8A8B","#827E7F","#767173","#5C585A","#000000","#FEFCDF","#FEF4C4","#FEED9B","#FEE573","#FFED43","#F6CC0B","#E0B800","#C9A601","#AD8E00","#8C7301","#FFDED3","#FFC4B0","#FF9D7D","#FF7A4E","#FF6600","#E95D00","#D15502","#BA4B01","#A44201","#8D3901","#FFD2D0","#FFBAB7","#FE9A95","#FF7A73","#FF483F","#FE2419","#F10B00","#D40A00","#940000","#6D201B","#FFDAED","#FFB7DC","#FFA1D1","#FF84C3","#FF57AC","#FD1289","#EC0078","#D6006D","#BB005F","#9B014F","#FCD6FE","#FBBCFF","#F9A1FE","#F784FE","#F564FE","#F546FF","#F328FF","#D801E5","#C001CB","#8F0197","#E2F0FE","#C7E2FE","#ADD5FE","#92C7FE","#6EB5FF","#48A2FF","#2690FE","#0162F4","#013ADD","#0021B0","#D3FDFF","#ACFAFD","#7CFAFF","#4AF7FE","#1DE6FE","#01DEFF","#00CDEC","#01B6DE","#00A0C2","#0084A0","#EDFFCF","#DFFEAA","#D1FD88","#BEFA5A","#A8F32A","#8FD80A","#79C101","#3FA701","#307F00","#156200","#D4C89F","#DAAD88","#C49578","#C2877E","#AC8295","#C0A5C4","#969AC2","#92B7D7","#80ADAF","#9CA53B"];
 var $colorBox=$(document.createElement("div")).css({"width":"100px","height":"100px","position":"absolute","border":"1px solid #999999","line-height":"10px"});
 $.each(itemColors,function(n,v)
  {
  var $item=$('<a href="" title="'+v+'"><img src="" width="10" height="10" border="0" style="background:'+v+';" /></a>').click(function(){callback(v);$colorBox.remove();return false;}).appendTo($colorBox);
  })
 $colorBox.insertAfter(this).hover(function(){},function(){$colorBox.remove();});
 }
})(jQuery); 

请把上面的代码保存为colorpicker.js

需要用到的图片如下:

 

调用方法如下:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>我的拾色器</title> 
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="colorpicker.js"></script> 
</head> 
<body> 
<!--.main-wrap,#main End--> 
<img src="color.png" onclick="var $this=$(this);$this.pickColor(function(color){$this.css('background',color);});"/><br /></br /> 
<input type="text" size="7" maxlength="7" value="#ffffff" onclick="var $this=$(this);$this.pickColor(function(color){$this.css('background',color);$this.val(color);$this.val(color);});" /> 
</body> 
</html> 

不错吧!嘎嘎!

找张截图显示效果:

  

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com