关闭

web颜色拾取器。。。

1667人阅读 评论(3) 收藏 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Color</title>
<style type="text/css">

#Color {
    width:282px;
    height:156px;
    padding:10px;
    background-color:#F4F4F4;
    border:#CCCCCC 1px solid;
    position:absolute;
    display:none;
}

#Color .Color_left {
    float:left;
    clear:left;
}

#Color .Color_right {
    float:right;
    clear:right;
    width:32px;
    text-align:center;
}

#Color .Color_tr {
    clear:both;
}

#Color .Color_td_L, #Color .Color_td_R {
    cursor:pointer;
}

#Color .Color_td_L {
    float:left;
    width:8px;
    height:8px;
    overflow:hidden;
}

#Color .Color_td_R {
    width:25px;
    height:4px;
    overflow:hidden;
    margin:auto;
}

#Color .Color_back, #Color .Color_text {
    margin-top:8px;
}

#Color .Color_back {
    float:left;
    width:60px;
    height:18px;
    overflow:hidden;
    border:#000000 1px solid;
    cursor:pointer;
}

#Color .Color_text {
    float:right;
    line-height:18px;
    overflow:hidden;
    font-size:14px;
}
</style>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
    var html;
    
    window.IE = /MSIE/.test(window.navigator.userAgent);
    window.FF = bool;
    
    if (bool) {
    
        html = window.HTMLElement.prototype;
        
        window.__defineGetter__("event", function () {
        //兼容Event对象
            var o = arguments.callee;    
            
            do {
                if (o.arguments[0] instanceof Event) return o.arguments[0];            
            } while (o = o.caller);
            
            return null;
        });
        
        Event.prototype.__defineGetter__("srcElement", function () {
        //兼容Event.srcElement对象
            var n = this.target;
            while (n.nodeType != 1) n = n.parentNode;
            return n;
        });
        
        MouseEvent.prototype.__defineGetter__("wheelDelta", function () {
        //返回鼠标滚轮状态
            return this.detail * -1;
        });
        
        html.__defineSetter__("className", function (t_v) {
            this.setAttribute("class", t_v);
        });
        
        html.__defineGetter__("className", function () {
            return this.getAttribute("class");
        });
        
    }
    
})(/Firefox/.test(window.navigator.userAgent));


var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var $A = function (a) {
//转换数组
    return a ? Array.apply(null, a) : new Array;
};

Function.prototype.bind = function () {
//绑定事件
    var wc = this, a = $A(arguments), o = a.shift();
    return function () {
        wc.apply(o, a.concat($A(arguments)));
    };
};

Object.extend = function (a, b) {
//追加方法
    for (var i in b) a[i] = b[i];
    return a;
};

Object.extend(Object, {

    addEvent : function (a, b, c, d) {
    //添加函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
        
        if (a.attachEvent) a.attachEvent($ni, c);
        else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    },
    
    delEvent : function (a, b, c, d) {
    //删除函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }
        
        if (a.detachEvent) a.detachEvent($ni, c);
        else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    }
    
});

var Color = Class.create();

Color.prototype = {
//颜色摄取类,颜色算法偷滴说。。。:D

    hexch : ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'],
    
    cnum : [1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0],

    initialize : function (color) {
    //初始化参数
        var wc = this;
        wc.color = color;
        wc.rgb = "";
        wc.event = { keydown : null };
        wc.nonce = { obj : null, pro : null };
        wc.body = { left : null, right : null, text : null, back : null };
        wc.moveobj = { left : null, right : null, nonce : null };
    },
    
    load : function () {
    //加载构造
        var wc = this, os = wc.color.getElementsByTagName("div"), i = 0;
        for (; i < os.length ; i ++)
            if (os[i].nodeType != 3) {
                if (os[i].className == "Color_left") wc.body.left = os[i];
                else if (os[i].className == "Color_right") wc.body.right = os[i];
                else if (os[i].className == "Color_text") wc.body.text = os[i];
                else if (os[i].className == "Color_back") wc.body.back = os[i];
            }
    },
    
    toHex : function (n) {
    //转换成16进制
        var wc = this, h, l;
        n = Math.round(n), l = n % 16, h = Math.floor((n / 16)) % 16;
        return (wc.hexch[h] + wc.hexch[l]);
    },
    
    toColor : function (r, g, b, n) {
    //不知
        var wc = this
            , r = ((r * 16 + r) * 3 * (15 - n) + 128 * n) / 15
            , g = ((g * 16 + g) * 3 * (15 - n) + 128 * n) / 15
            , b = ((b * 16 + b) * 3 * (15 - n) + 128 * n) / 15;
        return wc.toHex(r) + wc.toHex(g) + wc.toHex(b);
    },
    
    doColor : function (l) {
    //不知
        var wc = this, c = wc.rgb, r = '0x' + c.substring(1, 3), g = '0x' + c.substring(3, 5), b = '0x' + c.substring(5, 7);
        if (l > 120) {
            l = l - 120
            , r = (r * (120 - l) + 255 * l) / 120
            , g = (g * (120 - l) + 255 * l) / 120
            , b = (b * (120 - l) + 255 * l) / 120;
        } else {
            r = (r * l) / 120, g = (g * l) / 120, b = (b * l) / 120;
        }
        return wc.toHex(r) + wc.toHex(g) + wc.toHex(b);
    },
    
    foColor : function (c) {
    //把ff的背景转换掉
        var wc = this, a;
        if (c.indexOf("#") > -1) return c;
        else {
            a = c.match(//d+/g);
            return "#" + wc.toT16(a[0]) + wc.toT16(a[1]) + wc.toT16(a[2]);
        }
    },
    
    toT16 : function (i) {
    //补充十位
        var s = parseInt(i).toString(16);
        return ("0" + s).substr(s.length - 1);
    },
    
    offset : function (o) {
    //设置定位
        var $x = $y = 0;
        do { $x += o.offsetLeft, $y += o.offsetTop; }
        while (o = o.offsetParent);
        return { x : $x, y : $y };
    },
    
    setMoveobj : function (pro, obj) {
    //设置当前选中对象的样式
        var wc = this, att;
        
        if (wc.moveobj[pro] == obj) return;
        else {
            att = { pre : [], nex : [] };
            
            if (pro == "right") { att.pre = ["4px", "25px", "none"], att.nex = ["6px", "30px", "#000000 1px solid"]; }
            else { att.pre = ["8px", "8px", "none"], att.nex = ["6px", "6px", "#000000 1px solid"]; }
    
            if (wc.moveobj[pro]) with (wc.moveobj[pro].style) { height = att.pre[0], width = att.pre[1], border = att.pre[2]; }
            wc.moveobj[pro] = obj;
            if (wc.moveobj[pro]) with (wc.moveobj[pro].style) { height = att.nex[0], width = att.nex[1], border = att.nex[2]; }
        }
    },
    
    nextSibling : function (obj) {
    //获取下一个对象
        do {
            obj = obj.nextSibling;
        } while (obj && obj.nodeType == 3);
        return obj;
    },
    
    previousSibling : function (obj) {
    //获取前一个对象
        do {
            obj = obj.previousSibling;
        } while (obj && obj.nodeType == 3);
        return obj;
    },
    
    parse : function (obj) {
    //生成右边的颜色值
        var wc = this, color = wc.foColor(obj.style.backgroundColor), a, i;
        if (wc.rgb == color) return;
        else {
            a = [], wc.rgb = color;
            for (i = 0 ; i <= 30 ; i ++) a[i] = wc.doColor(240 - i * 8);
            wc.body.right.innerHTML = '<div class="Color_tr"><div class="Color_td_R" style="background-color:#'
                + a.join(';"><//div><//div><div class="Color_tr"><div class="Color_td_R" style="background-color:#')
                + ';"><//div><//div>';
            wc.setMoveobj("left", obj);
            wc.setMoveobj("right", wc.body.right.childNodes[15].childNodes[0]);
        }
    },
    
    move : function () {
    //鼠标移动的时候
        var wc = this, e = window.event, td = wc.moveobj.nonce = e.srcElement;
        if (/^(?!Color_td)/.test(td.className)) return;
        else {
            if (arguments[0]) wc.parse(td);
            if (td.className == "Color_td_R") wc.setMoveobj("right", td);
            wc.setInfo();
        }
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
    },
    
    wheel : function () {
    //鼠标滚轮滚动的时候
        var wc = this, e = window.event, moveobj = wc.moveobj, f = (e.wheelDelta > 0 ? "previous" : "next"),
            x = wc[f + "Sibling"](moveobj.right.parentNode);
        if (x) wc.setMoveobj("right", wc.moveobj.nonce = x.childNodes[0]);
        wc.setInfo();
    },
    
    enter : function (bool) {
    //确认的时候
        var wc = this, e = window.event;
        if ((e.type != "keydown" && /^(?!Color_td)/.test(e.srcElement.className))
            || (e.type == "keydown" && (e.which || e.keyCode) != 13)) return;
        
        wc.nonce.obj[wc.nonce.pro] = wc.foColor(wc.moveobj.nonce.style.backgroundColor);
        
        wc.color.style.display = "none";
        wc.parse(wc.moveobj.nonce = wc.body.left.childNodes[0].childNodes[0]);
        
        wc.setMoveobj("left", wc.moveobj.nonce);
        wc.setMoveobj("right", right = wc.body.right.childNodes[15].childNodes[0]);
        wc.setInfo();
        Object.delEvent(document, "onkeydown", wc.event.keydown);
        wc.event.keydown = null;
    },
    
    setInfo : function (obj) {
    //设置路过的颜色信息
        var wc = this, color = wc.foColor(wc.moveobj.nonce.style.backgroundColor);
        wc.body.text.innerHTML = color, wc.body.back.style.backgroundColor = color;
    },
    
    show : function (obj, pro) {
    //显示菜单
        var wc = this, pos = wc.offset(obj);
        
        if (!wc.moveobj.nonce) wc.init();
        wc.nonce.obj = obj, wc.nonce.pro = pro;
        with (wc.color.style) { left = pos.x + "px", top = obj.offsetHeight + pos.y + "px", display = "block"; }
        if (!wc.event.keydown) wc.event.keydown = Object.addEvent(document, "onkeydown", wc.enter.bind(wc));
    },

    init : function () {
    //生成颜色表,并且添加方法
        var wc = this, i = j = n1 = n2 = n3 = 0, tr = [], td = [];
        
        wc.color = document.getElementById(wc.color);
        wc.load();
        
        for (; i < 16 ; i ++) {
            for (b = [], j = 0 ; j < 30 ; j ++) {
                n1 = j % 5, n2 = Math.floor(j / 5) * 3, n3 = n2 + 3;
                
                td[j] = wc.toColor(
                    wc.cnum[n3] * n1 + wc.cnum[n2] * (5 - n1)
                    , wc.cnum[n3 + 1] * n1 + wc.cnum[n2 + 1] * (5 - n1)
                    , wc.cnum[n3 + 2] * n1 + wc.cnum[n2 + 2] * (5 - n1)
                    , i
                );
            }
            
            tr[i] = '<div class="Color_td_L" style="background-color:#'
                + td.join(';"><//div><div class="Color_td_L" style="background-color:#')
                + ';"><//div>';
        }
        wc.body.left.innerHTML = '<div class="Color_tr">' + tr.join('<//div><div class="Color_tr">') + '<//div>';
        wc.parse(wc.moveobj.nonce = wc.body.left.childNodes[0].childNodes[0]);
        wc.setInfo();
        
        Object.addEvent(wc.body.left, "onmousemove", wc.move.bind(wc, false));
        Object.addEvent(wc.body.left, "onmousedown", wc.move.bind(wc, true));
        Object.addEvent(wc.body.right, "onmousedown", wc.move.bind(wc, false));
        Object.addEvent(wc.body.right, ["onmousewheel", "DOMMouseScroll"], wc.wheel.bind(wc));
        Object.addEvent(wc.body.left, "ondblclick", wc.enter.bind(wc));
        Object.addEvent(wc.body.right, "ondblclick", wc.enter.bind(wc));
    }
    
};

var wc = new Color("Color");
</script>
</head>
<body>
<!--取色器 开始-->
<div id="Color">
    <div class="Color_left"></div>
    <div class="Color_right"></div>
    <div>
        <div class="Color_back"></div>
        <div class="Color_text"></div>
    </div>
</div>
<!--取色器 结束-->
<input onclick="wc.show(this, 'value')" readonly="readonly" />
<div onclick="wc.show(this, 'innerHTML')" style="width:100px; height:20px;text-align:center; border:#000000 1px solid;"></div>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:93690次
    • 积分:1494
    • 等级:
    • 排名:千里之外
    • 原创:51篇
    • 转载:12篇
    • 译文:1篇
    • 评论:40条
    文章分类
    最新评论