参考：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. P1802 5倍经验日

    P1802 5倍经验日 题目背景 现在乐斗有活动了!每打一个人可以获得5倍经验!absi2011却无奈的看着那一些比他等级高的好友,想着能否把他们干掉.干掉能拿不少经验的. 题目描述 现在absi20 ...

  2. RN相关命令

    添加第三方库 npm install --save xxx react-native link  链接库 react-native react-native -v 查看RN版本 npm info re ...

  3. Solrj API读取core 索引库数据

    private static String zkHost = "ip:2181,ip:2181,ip:2181"; private static CloudSolrServer s ...

  4. iOS开发系列-LLVM、Clang

    LLVM LLVM计划启动于2000年,最初由University of Illinois at Urbana-Champaign的Chris Lattner主持开展. 我们可以认为LLVM是一个完整 ...

  5. Ubuntu18.04安装RTX2080Ti+NVIDIA驱动+CUDA

    Ubuntu18.04安装RTX 2080Ti 与 Cuda10 ==========血泪更新========= 如果可以使用ppa安装最方便了 具体参考:https://www.cnblogs.co ...

  6. JS函数 返回值的函数 return sum;或者result = add2(3,4);

    返回值的函数 思考:上一节函数中,通过"document.write"把结果输出来,如果想对函数的结果进行处理怎么办呢? 我们只要把"document.write(sum ...

  7. 关于用Linux桌面版当工作系统这件事

    Linux稳定性好,Linux软件开放--不过等到决定把Linux当作日常工作用系统时,就一言难尽了-- 我日常工作的需求有: 笔记本扩展屏幕 Golang开发 docker/kubernetes 输 ...

  8. drupal7 smtp+mimemail+mailsystem 实现发送html邮件

    1.下载三个模块 smtp: https://www.drupal.org/project/smtp mimemail: https://www.drupal.org/project/mimemail ...

  9. Erlang学习记录:语法和特性

    特性 大下排序:number < atom < reference < fun < port < pid < tuple < list < bit st ...

  10. 关于如何正确打开.wlf文件

    只简单说明一下保存/打开.wlf需要注意的内容. (1) 保存 在GUI界面保存时,先切换到sim窗口: 用命令行保存时,其格式为: vsim –wlf <wave_file> … (2) ...