参考：http://bigui4.sinaapp.com/picker/colorpicker.html

效果：

html:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.         <title>取色</title>
  7.         <script type="text/javascript" src="js/jquery.js"></script>
  8.         <link rel="stylesheet" href="http://bigui4.sinaapp.com/css/jquery.bigcolorpicker.css">
  9.         <script src="http://bigui4.sinaapp.com/js/jquery.bigcolorpicker.js"></script>
  10.         <style>
  11.             input{
  12.                 background:none;
  13.                 outline:none;
  14.                 border:1px solid gray;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div>
  20.             <input type="text" value="" id="demoText" />
  21.             <input id="bn" type="button" value="选色" />
  22.         </div>
  23.         <script type="text/javascript">
  24.             $("#bn").bigColorpicker(function(el, color) {
  25.                 $('#demoText').css('background', color);
  26.                 $('#demoText').val(color);
  27.             });
  28.         </script>
  29.     </body>
  30. </html>

注意：还需将big_bgcolor.jpg复制到项目中，图片放置的目录结构参考css：

  1. .bigpicker-bgimage{
  2.     background-image:url(../images/big_bgcolor.jpg);
  3. }
  1. big_bgcolor.jpg：

bigcolorpicker 颜色拾取器插件——例的更多相关文章

  1. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  2. js颜色拾取器

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  3. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. docker上安装elasticsearch和ik分词器插件和header，实现分词功能

    docker run -di --name=tensquare_es -p 9200: -p 9300:9300 elasticsearch:5.6.8 创建elasticsearch容器(如果版本不 ...

  8. jQuery多媒体播放器插件jQuery Media Plugin使用方法

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

  9. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

随机推荐

  1. 最大字段和--GSS1 MUSHROOM ORZ

    过于naive了＝ ＝作为一个知识点总结一下算了.主要就是合并.对于一个区间的最大字段和,可以分别事下面的两个区间的子段和,或者事左边的右边加右边的左边.然后搞一下 ＝ ＝ #include < ...

  2. 下面是一段delphi代码,你在c# 中引入api 即可

    procedure TForm1.Button1Click(Sender: TObject);var i:HWND; cs:CREATESTRUCT;begin// i := FindWindowEx ...

  3. BZOJ 3669: [Noi2014]魔法森林(lct+最小生成树)

    传送门 解题思路 \(lct\)维护最小生成树.我们首先按照\(a\)排序,然后每次加入一条边,在图中维护一棵最小生成树.用并查集判断一下\(1\)与\(n\)是否联通,如果联通的话就尝试更新答案. ...

  4. NX二次开发-C++ CopyFile函数的用法

    NX9+VS2012 #include<Windows.h> CopyFile("D:\\test.prt","D:\\1\\test123.prt" ...

  5. （转）Java 标注（Annotation）详解

    转:http://blog.csdn.net/nbrremix/article/details/7337274 元数据的作用 如果要对于元数据的作用进行分类,目前还没有明确的定义,不过我们可以根据它所 ...

  6. VO和DO的区别

    阿里巴巴Java开发手册中的DO.DTO.BO.AO.VO.POJO定义 分层领域模型规约: DO( Data Object):与数据库表结构一一对应,通过DAO层向上传输数据源对象. DTO( Da ...

  7. 5.1_springboot2.x与安全（spring security）

    1.简介 常见的两个安全框架shiro|spring security,这里只介绍spring security; Spring Security是针对Spring项目的安全框架,也是Spring B ...

  8. 牛客D-Where are you /// kruskal+tarjan找无向图内的环

    题目大意: https://ac.nowcoder.com/acm/contest/272/D 在一个无向图中,给定一个起点,从起点开始走遍图中所有点 每条边有边权wi,表示第一次经过该道路时的花费( ...

  9. vue条形码+二维码

    <template> <section style="height: 100vh;" class="bg"> <div class ...

  10. jdbc出现中文乱码的解决办法