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

效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>取色</title>

        <script type="text/javascript" src="js/jquery.js"></script>

        <link rel="stylesheet" href="http://bigui4.sinaapp.com/css/jquery.bigcolorpicker.css">

        <script src="http://bigui4.sinaapp.com/js/jquery.bigcolorpicker.js"></script>

        <style>

            input{

                background:none;

                outline:none;

                border:1px solid gray;

            }

        </style>

    </head>

    <body>

        <div>

            <input type="text" value="" id="demoText" />

            <input id="bn" type="button" value="选色" />

        </div>

        <script type="text/javascript">

            $("#bn").bigColorpicker(function(el, color) {

                $('#demoText').css('background', color);

                $('#demoText').val(color);

            });

        </script>

    </body>

</html>

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

.bigpicker-bgimage{

    background-image:url(../images/big_bgcolor.jpg);

}
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. 理解TCP/IP,SOCKET,HTTP,FTP,RMI,RPC,webservic

    TCP/IP:网络宽带,传输数据的基础协议,所有得数据要在网络上传输都是基于TCP/IP协议(或UDP),才能送达到指定的目的地(IP,服务器硬件地址). SOCKET:SOCKET只是面对编程人员的 ...

  2. hdu6606多校第四次04——线段树加速dp

    /* 首先想到二分答案,难点在于如何判断是否有K段,每段和<=mid 把问题转化成求最多有R段,最少有L段,每段的的和<=mid,如果 L<=K<=R 那么显然存在把这个序列分 ...

  3. 区间dp——cf983b

    推出一个很神奇的结论就可以进行dp了 这个结论不光可以用在异或操作上,还可以用在任意操作里 /* 首先可以做出一个关于f的递推式 f[1..n]=f[ f[1..n-1],f[2..n] ] 那么直接 ...

  4. redis和redis php扩展安装

    redis的源码安装 wget http://download.redis.io/redis-stable.tar.gz tar -zxvf redis-stable.tar.gz cd redis- ...

  5. 牛客多校第九场 E All men are brothers 并查集/组合论

    题意: 一开始有n人互不认识,每回合有两个人认识,认识具有传递性,也就是相互认识的人组成小团体.现在问你每个回合,挑选四个人,这四个人互不认识,有多少种挑选方法. 题解: 认识不认识用并查集维护即可, ...

  6. 装hadoop的第一步，装ubuntu并换源并装jdk

    如何装ubuntu,这个自己百度.具体安装网站:http://www.ubuntu.com 我安装的是ubuntu Server版本的,然后是全英文安装.所以它的源自动定位到美国 下面是如何换源的,第 ...

  7. 基于Netty的RPC架构学习笔记（四）：netty线程模型源码分析（一）

    文章目录 如何提高NIO的工作效率 举个

  8. （转）python：Redirection is not supported

    Redirection isnot supported. 不支持重定向 解决方法: cmd: 在CMD命令行中,输入 "python" + "空格",即 &qu ...

  9. RTC, Real Time Clock

    配置 写入RTC_PRL, RTC_CNT, RTC＿ALR寄存器时,需要先进入配置模式,通过把RTC_CRL寄存器的CNF位置一. 另外,在每次配置一个寄存器时必须等待上一次配置完成,可以通过检测R ...

  10. 日常 java+雅思+训练题1

    今天主要学了一些类似c中的一些语句,java也是一样类似的,只有一些点需要稍微注意一下,一些语句是新增的需要知道. 完完全全新学的知识就是class和instance的区别.如何创建实例.数据的封装. ...