jQuery颜色选择器ColorPicker

reg183

已于 2022-04-26 21:27:37 修改

阅读量2.8k

点赞数

分类专栏：前端文章标签： jquery

于 2022-04-26 21:25:17 首次发布

本文链接：https://blog.csdn.net/chendongpu/article/details/124437629

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。效果如下：
请添加图片描述
代码如下：

<!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颜色选择器演示 </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>

    </body>

</html>