网页文章标题颜色生成代码及效果[在线生成工具]

作者: unvs 分类: Web前端 发布时间: 2012-06-27 15:43 ė13,519 views 6没有评论

在做一个后台程序,发现需要给文章标题添加颜色。看了一些网站的 颜色生成 代码,特别复杂或功能较强大,不 想用他们的,遂自己花时间写了一个较简单、实用的网页颜色生成小程序,另外,单独整理出了一个颜色代码生成工具 (为一个页面),全部分享出来,大家若觉得有用,可进行收藏、下载。

下面详细介绍下源码及说明,大家可自行修改、使用。
一、此小程序实现的功能及效果
1、可对颜色面板进行颜色选择,并有效果预览;
2、选择颜色后,RGB代码会自动在文本框中生成;
3、颜色面板为悬浮层显示,带有透明层,与页面层分离,体验效果更好;
4、面板带有关闭按钮,亦可点击透明层关闭面板,此效果可自行修改代码调整;
5、带有复制代码事件(颜色代码生成工具中含有);
6、没有做输入RGB代码,可预览效果,对于此程序不够实用,若想实现此效果只需加一个文本框触发事件即可;
7、界面效果,如下图所示:
 

二、颜色代码生成工具的功能及说明
1、打开页面,即看到颜色选择面板;
2、选择颜色后,RGB代码,会自动在文本框中生成,同上面;
3、没有悬浮及效果,此工具目的:快速获取想要颜色的RGB代码,并进行复制操作;
4、复制按钮,兼容了IE、firefox、chrome、360等主流浏览器,皆可进行复制。此项为本人特别实现的,大家可收藏 其中复制代码
5、生成工具界面效果,如下图所示:
    
对于颜色种数调整、样式修改、事件改动,请详细查看第三点:代码讲解, 文章最后有效果查看及源码下载。

三、页面主体JS代码说明

    function chooseColor(color){//此为选择颜色后,触发函数
        document.getElementById("preview").style.backgroundColor = color;
        document.getElementById("color").value = color;
        closeDiv();//选择颜色后,会关闭颜色面板,若不想关闭,继续选择对比,可将 此句注释
    }
    function closeDiv(){//关闭层函数
        document.getElementById("colorDiv").style.display = "none";
        document.getElementById("colorBgDiv").style.display = "none";
    }
    function copy_code() {//复制代码函数
        var explorer = window.navigator.userAgent;
        var str = document.getElementById("color").value;//获取颜色文 本框值
 
        if(explorer.indexOf("MSIE") >= 0){//判断浏览器
            window.clipboardData.setData("Text",str);
            alert("颜色代码成功复制!");
        }
        else if(explorer.indexOf("Firefox") >= 0){
            copy(str);//若为IE外浏览器,调用此函数
            alert("成功复制!");
        }
        else if(explorer.indexOf("Chrome") >= 0){
            copy(str);
            alert("成功复制!");
        }
    } 
    function copy(str) {//除IE外其他浏览器复制代码处理函数(flash方式实现复制)
        var flashcopy = ‘flashcopy’; 
 
        if(!document.getElementById(flashcopy)) 
        {
            var divholder = document.createElement (‘div’); 
            divholder.id = flashcopy; 
            document.body.appendChild(divholder); 
        }
        
        document.getElementById(flashcopy).innerHTML = ”; 
        var divinfo = ‘<embed src="clipboard.swf" FlashVars="clipboard=’+str+’" width="0" height="0" type="application/x-shockwave-flash"></embed>’;//创建flash
 
        document.getElementById(flashcopy).innerHTML = divinfo;
    }
    
    function showColorPannel(){//关键的颜色面板输出 函数
        var color;
        var R;
        var G;
        var B;
 
        //255*255*255
        count=15*16+15;
        var html="";
        html += "<div id=’colorBgDiv’ style=’position:absolute;top:0;left:0;width:100%;height:100%;
        background:#555;opacity:0.5;filter:alpha (opacity=50);’ onclick=\"closeDiv();\"></div>
        <div id=’colorDiv’ style=’background:#fff;position:absolute;top:50%;left:50%;
        margin: -102px 0 0 -202px;border:#ccc 1px solid;padding:2px;’>";//此段为悬浮层及背景层样式,根据需要可进行修改
        html += "<table width=’225′ border=0><tr><td><a onclick=\"chooseColor(‘#ff0000′)\" style=’padding:0px 8px;background-color:#ff0000;’></a></td><td><a onclick=\"chooseColor (‘#008000′)\" style=’padding:0px 8px;background- color:#008000;’></a></td><td><a onclick=\"chooseColor(‘#0000ff’)\" style=’padding:0px 8px;background-color:#0000ff;’></a></td><td><a onclick= \"chooseColor(‘#ff6600′)\" style=’padding:0px 8px;background- color:#ff6600;’></a></td><td align=’right’><a onclick=’closeDiv ();’>Close</a></td></tr></table><table border=0>";//此段为面板表格 样式及顶部分的几种固定颜色的代码,颜色同样可进行修改,怎么修改就不讲了
 
        for(R=0;R<count;R++){//关键的 开始循环代码
            html += "<tr>";
            for(G=0;G<count;G++){
                for(B=0;B<count;B++){
                    if(R<10){
                   RR="0"+R.toString(16);
               }else{
                   RR=R.toString(16);
               }
                    if(B<10){
                   BB="0"+B.toString(16);
               }else{
                   BB=B.toString(16); 
               }
                    if(G<10){
                   GG="0"+G.toString(16);
               }else{
                   GG=G.toString(16);
               }
               
                    color=RR+""+GG +""+BB;
                    html += "<td bgcolor=’#"+color+"’ width=10 height=10 onMouseOver=\"this.style.cursor=’pointer’\" onclick=\"chooseColor(‘#"+color+"’)\"></td>";
               B+=80;//此处意为蓝色RGB加80的值,此为80 ,蓝色区将循环255/80 = 四次
           }//B end
           
                G+=80;//同蓝色,B与G决定了面板的列数,如果 蓝色循环4次,绿色循环4次,面板将有16列
            }//G end
            
            R+=40;//此处为红色循环次数,R决定了面板行数,循环4次,即 为四行
            html += "</tr>";            
        }//R end
        
        html += "</table></div>";//面板代码结束
        document.getElementById("choose").innerHTML=html;//输出显示
    }

四、颜色代码生成工具效果预览及源码分享
颜色代码生成网页程序:
效果预览: 点击查看
代码分享: 点击下载

颜色代码生成小工具:
效果预览: 点击查看
代码分享: 点击下载

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:网页文章标题颜色生成代码及效果[在线生成工具]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部