写了一个小巧的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
投稿猜你喜欢
- 使用pyaudio录音和格式转化环境pip3 install pyaudiopip3 install wavepip3 install nu
- 前言本文使用 cpu 版本的 TensorFlow 2.4 ，分别搭建单层 Bi-LSTM 模型和多层 Bi-LSTM 模型完成文本分类任务
1. 前言当日期数据作为图表的坐标轴时通常需要特殊处理，应为日期字符串比较长，容易产生重叠现象2. 设定主/次刻度2.1 引用库from m- 本文要实现的是点击标签滚动定位到对应位置，且给在当前板块范围指定的导航标签添加样式效果的话看下面GIFwxml部分top当前离顶部滚动的距离
- 有时候我们会截取字符串中的一些特殊想要的东西，大小写字母、模号、汉字、数字等等，今天先介绍一个获取字符串中小写字母（也是大写字母）的方式，直
- 目录一、建立画布二、用plt.subplot函数建立坐标系，并分别绘制折线图和柱状图三、完整代码如下所示四、对应效果图如下所示一、建立画布i
- 在Python个人博客程序开发实例框架设计中，我们已经完成了 数据库设计、数据准备、模板架构、表单设计、视图函数设计、电子邮件支持 等总体设
- 图画效果：代码分享：整体由四部分组成：红日、小鸟、大小船、水面from turtle import * #导入tu
- 前几天，GitHub 有个开源项目特别火，只要输入标题就可以生成一篇长长的文章。背后实现代码一定很复杂吧，里面一定有很多高深莫测的机器学习等
- Q0.创建用户【前提】 你必须有CREATE USER系统权限。当你使用CREATE USER语句创建一
- 本文实例讲述了python获取图片颜色信息的方法。分享给大家供大家参考。具体分析如下：python的pil模块可以从图片获得图片每个像素点的
- 前言通常在项目中，一般都需要一种编程语言来操作数据库，使用Python来操作数据库有着天然的优势，因为Python的字典和MongoDB的文
- 本文实例为大家分享了使用countdown插件实现倒计时的具体代码，供大家参考，具体内容如下实现的效果如下：这里实现的是一个活动倒计时，获取
- 本文实例讲述了js控制多图左右滚动切换效果。分享给大家供大家参考。具体如下：这是一款纯js实现点击左右按钮图片自动左右平滑滚动，默认5个一组
- 1.为什么要跨平台编程？双平台编程或多平台编程，只是为提供更好开发更兼容的解决方案的一种手段，编程时服务于产品和客户的，也是因地制宜。先安装
- 1. 输入一个百分制成绩，要求输出成绩等级A、B、C、D、E，其中90~100分为A，80~89分为B，70~79分为C，60~69分为D，
- 思路:遍历文件夹下面的文件夹如果文件夹名称等于".svn",则修改文件夹的属性（因为".svn"的文
- 如何在庞大的数据中高效的检索自己需要的东西？本篇内容介绍了Python做出一个大数据搜索引擎的原理和方法，以及中间进行数据分析的原理也给大家
- python实现情感分析（Word2Vec）** 前几天跟着老师做了几个项目，老师写的时候劈里啪啦一顿敲，写了个啥咱也布吉岛，线下自己就瞎琢
- ASP木马防御： 代码如下:const adTypeBinary=1 dim jpg(1):jpg(0)=CB
