colorpicker插件和使用（直接能用真美好）

最新推荐文章于 2024-05-22 15:49:49 发布
最新推荐文章于 2024-05-22 15:49:49 发布
阅读量1.4k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/leonaLily/blog/398615
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

这是jquery.colorpicker.js 

/**
 * jQuery插件：颜色拾取器
 *
 * @author  Karson
 * @url     http://blog.iplaybus.com
 * @name    jquery.colorpicker.js
 * @since   2012-6-4 15:58:41
 */
(function($) {
    var ColorHex=new Array('00','33','66','99','CC','FF');
    var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
    $.fn.colorpicker = function(options) {
        var opts = jQuery.extend({}, jQuery.fn.colorpicker.defaults, options);
        initColor();
        return this.each(function(){
            var obj = $(this);
            obj.bind(opts.event,function(){
                //定位
                var ttop  = $(this).offset().top;     //控件的定位点高
                var thei  = $(this).height();  //控件本身的高
                var tleft = $(this).offset().left;    //控件的定位点宽
                $("#colorpanel").css({
                    top:ttop+thei+5,
                    left:tleft
                }).show();
                var target = opts.target ? $(opts.target) : obj;
                if(target.data("color") == null){
                    target.data("color",target.css("color"));
                }
                if(target.data("value") == null){
                    target.data("value",target.val());
                }
          
                $("#_creset").bind("click",function(){
                    target.css("color", target.data("color")).val(target.data("value"));
                    $("#colorpanel").hide();
                    opts.reset(obj);
                });
          
                $("#CT tr td").unbind("click").mouseover(function(){
                    var color=$(this).css("background-color");
                    $("#DisColor").css("background",color);
                    $("#HexColor").val($(this).attr("rel"));
                }).click(function(){
                    var color=$(this).attr("rel");
                    color = opts.ishex ? color : getRGBColor(color);
                    if(opts.fillcolor) target.val(color);
                    target.css("color",color);
                    $("#colorpanel").hide();
                    $("#_creset").unbind("click");
                    opts.success(obj,color);
                });
          
            });
        });
    
        function initColor(){
            $("body").append('<div id="colorpanel" style="position: absolute; display: none;"></div>');
            var colorTable = '';
            var colorValue = '';
            for(i=0;i<2;i++){
                for(j=0;j<6;j++){
                    colorTable=colorTable+'<tr height=12>'
                    colorTable=colorTable+'<td width=11 rel="#000000" style="background-color:#000000">'
                    colorValue = i==0 ? ColorHex[j]+ColorHex[j]+ColorHex[j] : SpColorHex[j];
                    colorTable=colorTable+'<td width=11 rel="#'+colorValue+'" style="background-color:#'+colorValue+'">'
                    colorTable=colorTable+'<td width=11 rel="#000000" style="background-color:#000000">'
                    for (k=0;k<3;k++){
                        for (l=0;l<6;l++){
                            colorValue = ColorHex[k+i*3]+ColorHex[l]+ColorHex[j];
                            colorTable=colorTable+'<td width=11 rel="#'+colorValue+'" style="background-color:#'+colorValue+'">'
                        }
                    }
                }
            }
            colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000;">'
            +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
            +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
            +'<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
            +'<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"><a href="javascript:void(0);" id="_cclose">关闭</a> | <a href="javascript:void(0);" id="_creset">清除</a></td></tr></table></td></table>'
            +'<table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000"  style="cursor:pointer;">'
            +colorTable+'</table>';
            $("#colorpanel").html(colorTable);
            $("#_cclose").live('click',function(){
                $("#colorpanel").hide();
                return false;
            }).css({
                "font-size":"12px",
                "padding-left":"20px"
            });
        }
        
        function getRGBColor(color) {
            var result;
            if ( color && color.constructor == Array && color.length == 3 )
                color = color;
            if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                color = [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
            if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                color =[parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
            if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                color =[parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
            if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                color =[parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
            return "rgb("+color[0]+","+color[1]+","+color[2]+")";
        }
    };
    jQuery.fn.colorpicker.defaults = {
        ishex : true, //是否使用16进制颜色值
        fillcolor:false,  //是否将颜色值填充至对象的val中
        target: null, //目标对象
        event: 'click', //颜色框显示的事件
        success:function(){}, //回调函数
        reset:function(){}
    };
})(jQuery);
这是demo.html用来测试的 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>ColorPicker颜色选择器演示程序</title>
        <style>
            body,blockquote {margin:0;padding:0;font-size:12px;font-family:"微软雅黑",Verdana,Arial}
            #container {width:900px;margin:0 auto;}
            #image {margin-bottom:10px;}
            blockquote {margin:10px 0;padding:0;}
            .act1 {width:50px;}
          pre {margin:0;padding:0;border:1px solid #ccc;margin-top:10px;padding-left:5px;}
        </style>
    </head>
    <body>
        <div id="container">
        <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.colorpicker.js"></script>
    <h2>ColorPicker颜色选择器演示 <a href="http://blog.iplaybus.com/colorpicker.html">下载该插件</a> | <a href="http://blog.iplaybus.com/colorpicker.html">错误报告</a></h2>
    <blockquote>
        <font color="blue">默认：</font><br />
        请输入颜色值：<input type="text" id="cp1" />
        <pre>
$("#cp1").colorpicker({
    fillcolor:true
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">文字着色：</font><br />
        请输入颜色值：<input type="text" id="cp2" />
        <pre>
$("#cp2").colorpicker({
    fillcolor:true,
    success:function(o,color){
        $(o).css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">外部点击触发：</font><br />
        请输入颜色值：<input type="text" id="cp3text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp3" style="cursor:pointer"/>
        <pre>
$("#cp3").colorpicker({
    fillcolor:true,
    success:function(o,color){
        $("#cp3text").css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">外部鼠标Mouseover触发：</font><br />
        请输入颜色值：<input type="text" id="cp4text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp4" style="cursor:pointer"/>
        <pre>
$("#cp4").colorpicker({
    fillcolor:true,
    event:'mouseover',
    success:function(o,color){
        $("#cp4text").css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">填充其它对象：</font><br />
        请输入颜色值：<input type="text" id="cp5text" value=""/><img src="colorpicker.png" id="cp5" style="cursor:pointer"/>
        <pre>
$("#cp5").colorpicker({
    fillcolor:true,
    event:'mouseover',
    target:$("#cp5text")
});</pre>
    </blockquote>
</div>
<script type="text/javascript">
    $(function(){
        $("#cp1").colorpicker({
            fillcolor:true
        });
        $("#cp2").colorpicker({
            fillcolor:true,
            success:function(o,color){
                $(o).css("color",color);
            }
        });
        $("#cp3").colorpicker({
            fillcolor:true,
            success:function(o,color){
                $("#cp3text").css("color",color);
            }
        });
        $("#cp4").colorpicker({
            fillcolor:true,
            event:'mouseover',
            success:function(o,color){
                $("#cp4text").css("color",color);
            }
        });
        $("#cp5").colorpicker({
            fillcolor:true,
            event:'mouseover',
            target:$("#cp5text")
        });
    });
</script>
            </div>
<span style="display:none;"><script src="http://s84.cnzz.com/stat.php?id=3501297&web_id=3501297" language="JavaScript" charset="utf-8"></script></span>
        </div>
    </body>
</html>



转载于:https://my.oschina.net/leonaLily/blog/398615

weixin_34358365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
练习-原生js写的颜色选择器colorpicker
Fky_mie的博客
05-14 1699
colorpicker 需求分析: 以下四种方案, 前三种为点击色块选择颜色, 第四种为滑动/拖拽选颜色, 所以分为两种实现类型-色块或者色带, 做出两种colorpicker. 第一种方案的颜色选择器: 点击色块选择颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
JS 选色器 colorpicker.js 使用与下载
卡尔特斯
02-23 1083
JS 选色器 colorpicker.js 使用与源码，支持取得 hex、rgb 色值。
拾色器插件colorpicker.js的应用
祈澈菇凉
01-19 2446
需求：点击颜色的input框的时候，会出现拾色器的插件，将自己选择的颜色的色号赋值给input里面，在插件库里面找到了一个UI样式还比较好看的插件，作了一些修改，符合项目需要，分享出来。 找了一个拾色器插件，将colorpicker.js下载并且引用。 <script src="./colorpicker.js"></script> 下载地址...
SwiftUI中DatePicker和ColorPicker的用法介绍
最新发布
郭永明的技术专栏
05-22 897
DatePicker是特殊类型的Picker，当我们需要要求用户指定日期时，我们可以使用它。ColorPicker是最近iOS版本中新增的功能之一，当我们想让用户从调色板中选择颜色时，它确实简化了我们的生活。
颜色选择器
heqinghua217的博客
07-22 508
请去我的资源中找到源代码和js ColorPicker颜色选择器演示程序 body,blockquote {margin:0;padding:0;font-size:12px;font-family:"微软雅黑",Verdana,Arial} #container {wid
从零开始实现一个颜色选择器（原生JavaScript实现）
嘿嘿
10-14 1258
项目目录与文件创建 首先，我们无需搭建项目的环境，我们还是直接用最简单的方式，也就是引入的方式来创建这个项目，这样也就方便了我们一边编写一边测试。创建一个空目录，命名为ColorPicker,创建一个js文件，即color-picker.js,然后创建一个index.html文件以及创建一个样式文件color-picker.css。现在你应该可以看到你的项目目录是如下所示: ColorPicker │index.html │color-picker.js │color-picker.css...
一个用jquery开发的colorpicker的插件
09-14
`jQuery ColorPicker` 插件是一个高效且易于使用的工具，它允许用户在网页上方便地选取颜色。本篇文章将深入探讨这个插件的特点、功能、安装与使用方法。 ### 一、概述 `jQuery ColorPicker` 是一个基于JavaScript...
colorpicker
10-10
在实际使用中，"Colorpicker"工具常常集成在开发环境、文本编辑器或者浏览器插件中，使得开发者无需离开当前工作环境就能快速选取颜色。这样的集成提高了工作效率，减少了在不同应用之间切换的麻烦。 总的来说，...
MyColorPicker4.22.zip——UE4拾色器插件
09-02
在UE4的开发过程中，为了提高效率和用户体验，开发者们经常需要使用到各种插件来扩展其功能。"MyColorPicker4.22.zip"就是这样一个专门为UE4设计的插件，它的核心功能是提供一个直观、便捷的调色板工具，让开发者...
Notepad++插件使用技巧,转自各方
08-07
ColorPicker插件就是一个例子，它通常用于图形设计、网页开发或任何需要在代码中表示颜色的项目。通过这个插件，用户可以直接在编辑器中打开一个颜色选择器，选取所需的颜色，并自动将其转换为相应的颜色代码（如RGB...
颜色选择器jquery.colorpicker
10-23
总结，jQuery.colorpicker插件以其易用性和灵活性，成为网页开发中的得力助手。无论你是初学者还是经验丰富的开发者，都能快速掌握并利用它来增强你的网页色彩选择功能，为用户提供更优质的交互体验。
colorPicker.js javascript颜色选择框
11-25
javascript颜色选择框,适用于ie,firefox,chrome等浏览器. 调用方法: function changeColor(){ var colorText = document.getElementById('color'); if (colorText.value == '') colorText.value = '#FFFFFF'; colorText.value = colorText.value.toUpperCase(); var colorFont = document.getElementById('colorFont'); colorFont.style.background = colorText.value; document.getElementById('buttonOK').focus(); }         
JqueryColorPicker
11-07
Html5环形取色器, 一个取色器大图"imgMark"，一个鼠标图"imgTulip",把路径配置到option即可。使用方式也在js里，注释部分就是，该文件完全公开完全公开。
jQuery ColorPicker网页取色器、颜色选择器 v1.0
05-12
摘要:脚本资源,jQuery,拾色器,　　jQuery ColorPicker颜色选择器【网页取色器】，有的也称拾色器，总之它是运行在网页上截取屏幕颜色值的小工具，可以把某点的颜色值转换至对应格式传入需要的地方。ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。 　　
js实现拾色器插件（ColorPicker）
01-19
对一个前端来说，颜色选择的插件肯定不陌生，许多小伙伴对这类插件的实现可能会比较好奇，这里奉上原生js版本的拾色器。 效果图： 讲下实现方式： 1.颜色除了RGB跟十六进制的表现外，还有一个HSV的表现形式。H（hue）是色相，值域是0度到360度，这个值控制的是你看到的是什么颜色，通俗点讲就是红橙黄绿…；S（saturation）是饱和度，值域是0到1，这个值控制颜色的鲜艳程度，可以理解为大红跟淡红的差别；V（value）可以理解为亮度，值域也是0到1。 2.rgb颜色跟hsv颜色的相互转化有专门的公式，可自行去百度了解下 3.面向对象的编程方式公认为易扩展，高复用。 整个目录结构如下：
JavaScript拾色器ColorPicker编写实战（仿Photoshop）
09-19
JavaScript拾色器ColorPicker编写实战（仿Photoshop） 仿Photoshop取色功能的JavaScript拾色器——ColorPicker编写实战源代码，模仿PhotoShop的设色器的功能，将其迁移到ＷＥＢ应用中，当然了，本拾色器并不是一个完美的拾色器，因为只是模拟了HSV模式，而且只提供一个直观的界面，然后给出颜色的代码，实际上它并不能从屏幕的任意位置获取你想要的颜色。
php和android选择器,Android_android 字体颜色选择器(ColorPicker)介绍，primary_text_yellow.xml 复制代码 代 - phpStudy...
weixin_42342226的博客
03-17 114
android 字体颜色选择器(ColorPicker)介绍primary_text_yellow.xmlthemes.xml@color/primary_text_yellow相关阅读:在Linux的命令行中实现字符出现频率统计的方法css3 box-sizing属性使用参考指南基于javascript实现文字无缝滚动效果Linux折腾记(四)：Linux桌面系统字体配置详解深入分析MSSQL数...
颜色选择器html组件,ColorPicker 颜色选择器
weixin_28932617的博客
06-04 1368
ColorPicker 颜色选择器ColorPicker 颜色选择器用于颜色选择，支持多种格式。基础用法有默认值无默认值使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。有默认值无默认值export default {data() {return {color1: '#409EFF',color2: null}}};选择透明度ColorPicker 支持普...
【vue + element ui】ColorPicker 颜色选择器的使用
qq_44938769的博客
08-18 3547
自定义el-colorPicker的使用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值