参考：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中的第一个NDK的例子

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

  2. Python 列表,元组,字典

    0)字符串切片 py_str = 'python' >>>py_str[0] #取第一个字符串,返回值为"p",超出范围会报错 >>>py_st ...

  3. ios 查看UIView的层次继承关系工具

    http://stackoverflow.com/questions/5150186/how-do-i-inspect-the-view-hierarchy-in-ios https://github ...

  4. Spring-Security (学习记录二)--修改为自己的登录页面

    目录 1.修改spring-security.xml配置文件 2.增加login.jsp页面 3.重启项目即可看到效果 1.修改spring-security.xml配置文件 <!-- auto ...

  5. word2vec中关于霍夫曼树的

    再谈word2vec 标签: word2vec自然语言处理NLP深度学习语言模型 2014-05-28 17:17 16937人阅读 评论(7) 收藏 举报  分类: Felven在职场(86)    ...

  6. ionic：安装

    ylbtech-ionic:安装 1.返回顶部 1. ionic 安装 本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址: <link href="https:// ...

  7. 20140422 ALT+F8 四个强制类型转换

    一.static_cast, dynamic_cast, const_cast http://www.cnblogs.com/chio/archive/2007/07/18/822389.html h ...

  8. 【csp】2017-9

    1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...

  9. spark 变量使用 broadcast、accumulator

    broadcast 官方文档描述: Broadcast a read-only variable to the cluster, returning a [[org.apache.spark.broa ...

  10. 【学术篇】NOIP2017 d2t3 列队phalanx splay做法

    我可去他的吧.... ==============先胡扯些什么的分割线================== 一道NOIP题我调了一晚上...(其实是因为昨晚没有找到调试的好方法来的说...) 曾经我以 ...