参考：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. Android源码的git下载地址

    git clone https://android.googlesource.com/device/common.git    git clone https://android.googlesour ...

  2. Android中的第一个NDK的例子

    前几天研究了JNI技术后,想在Android上试一试研究结果,查阅了很多资料后,总结如下步骤: 首先来看一下什么是NDK NDK 提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动 ...

  3. 大转盘抽奖css3+js(简单书写)

    今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...

  4. NX二次开发-UFUN写入本地文本文档uc4524

    1 NX9+VS2012 2 3 #include <uf.h> 4 #include <uf_cfi.h> 5 #include <uf_ui.h> 6 7 us ...

  5. 在vs2010下编译boost

    1. 解压缩后,运行bootstrap.bat批处理文件,得到bjam.exe; 2. 在vs2010下编译boost boost最新版本已经支持vs2010,然而直接下载编译会发现一堆bug: 首先 ...

  6. 使用bash关联数组统计单词

    使用bash关联数组统计单词 从bash 4开始支持关联数组,使用前需要声明,即 declare -A map map[key1]=value1 map[key2]=value2 map=([key1 ...

  7. Maven精选系列--classifier元素妙用

    首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...

  8. Python3数据分析与挖掘建模实战✍✍✍

    Python3数据分析与挖掘建模实战 Python数据分析简介 Python入门 运行:cmd下"python hello.py" 基本命令: 第三方库 安装 Windows中 p ...

  9. Python3中string内置参数

    说明: 使用ipython查看python3的内置函数 ,只需要输入字符串按两下tab键 capitalize():将字符串中第一个字符大写 casefold:将字符串中的所有大写字母转为小写 cen ...

  10. 常用指令linux总结

    linux的基础操作命令: 常见命令: man 查看帮助文档 用法:man + 命令 help 查看指定命令的用法 用法: 命令 --help(有空格) tab linux下命令与文件名补全 用法:在 ...