最前端

我的工作,我的生活,点点滴滴...

归档: ‘ 2009 年十一月

半透明背景生成器

半透明背景生成器

(如:30%)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

代码:

;(function(){
    var byId = function(id){
        return document.getElementById(id);
    };
    var dom = function(){
 
    };
    var bgcolor = byId('ID_Bgcolor');
    var per = byId('ID_Per');
    var sub = byId('ID_Sub');
    var preview = byId('ID_Preview');
    var code = byId('ID_Code');
    var toColorRgb = function(str){
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = str.toLowerCase();
        if(sColor && reg.test(sColor)){
            if(sColor.length === 4){
                var sColorNew = "#";
                for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for(var i=1; i<7; i+=2){
                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
            }
            return sColorChange.join(",");
        }else{
            return sColor;
        }
    };
    var getStyle = function(bgcolor,per){
        per = per/100;
        var _bgcolor = bgcolor.replace('#','');
        var ffbg = toColorRgb(bgcolor);
        var iebg = Math.floor(per * 255).toString(16)+_bgcolor;
        var css = ".rgba{background:rgba("+ffbg+", "+per+"); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#"+iebg+"', EndColorStr='#"+iebg+"');*zoom:1;} :root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00"+_bgcolor+"', EndColorStr='#00"+_bgcolor+"'); }";
        return css;
    };
    var appendStyle = function(css,id) {
        var head = document.getElementsByTagName('head')[0];
        var old = byId(id);
        if(old){
            head.removeChild(old);
        }
        var style = document.createElement('style');
        style.type = 'text/css';
        style.id = id;
        try {
            style.appendChild(document.createTextNode(css));
        } catch (e) {
            if (style.styleSheet) {
                try {
                    oldCss = style.styleSheet.cssText;
                } catch( e) {
                    oldCss = '';
                }
                style.styleSheet.cssText = oldCss + css;
            } else {}
        }
        head.appendChild(style);
    };
    var show = function(){
        var perVal = per.value;
        perVal = Math.max(0,perVal);
        perVal = Math.min(100,perVal);
        var style = getStyle(bgcolor.value,perVal);
        var code = style.replace('.rgba','.your-css-clz');
        appendStyle(style,'rgbastyle');
        code.innerHTML = '<pr'+'e>'+code+'</p'+'re>';
    };
    show();
    bgcolor.onchange = function(){
        show();
    };
    per.onchange = function(){
        show();
    };
})();