用js實現(xiàn)的仿sohu博客更換頁面風格（簡單版）

更新時間：2007年03月22日 00:00:00 作者：

prowin.js 

/** 
* @author ldgmc 
*/ 
function PopWin(id,width,title){ 
    this.id=id; 
    this.width=width; 
    this.title=title; 
    this.createIns=function(){ 
        var ins=document.createElement("div"); 
        ins.className="popWin"; 
        ins.id=this.id; 
        ins.style.width=this.width+'px'; 
        return ins;     
    }; 
    this.items=new Array(); 
    this.instance=this.createIns(); 
    this.init=function(){ 
        this.addTitle(this.title); 
        document.body.appendChild(this.instance); 
    } 
    this.addTitle=function(title){ 
        var titleDiv=document.createElement("div"); 
        titleDiv.className="title"; 
        var titleText=document.createTextNode(title); 
        titleDiv.appendChild(titleText); 
        this.instance.appendChild(titleDiv); 
    } 
    this.addItem=function(id,title){ 
        this.items[id]={}; 
        this.items[id]["title"]=ldg.common.setClassName("div","itemTitle"); 
        this.items[id]["title"].appendChild(document.createTextNode(title)); 
        this.items[id]["content"]=ldg.common.setClassName("div","itemContent"); 
        this.items[id]["title"].id=id; 
        ldg.event.addEvent(this.items[id]["title"],"mouseover",this.mouseover.bindAsEventListener(this)) 
        ldg.event.addEvent(this.items[id]["title"],"mouseout",this.mouseout.bindAsEventListener(this)); 
        ldg.event.addEvent(this.items[id]["title"],"click",this.click.bindAsEventListener(this)); 
        this.instance.appendChild(this.items[id]["title"]); 
        this.instance.appendChild(this.items[id]["content"]); 
    } 
    this.addItemContent=function(parentId,imgUri,cssUri,isLast){ 
        var itemDiv=ldg.common.setClassName("div","item"); 
        var itema=document.createElement("a"); 
        itema.href="#"; 
        var itemImg=document.createElement("img"); 
        itemImg.src=imgUri; 
        itemImg.css=cssUri; 
        ldg.event.addEvent(itemImg,"click",this.changeLink.bindAsEventListener(this));     
        itema.appendChild(itemImg); 
        itemDiv.appendChild(itema); 
        this.items[parentId]["content"].appendChild(itemDiv); 
        if(isLast){ 
            this.items[parentId]["content"].appendChild(document.createElement("br")); 
        } 

    }                                           
    this.changeLink=function(e){ 
        var eObj=e.srcElement || e.target; 
        var link=document.getElementsByTagName("link"); 
        link[1].href=eObj.css; 
    } 
    this.mouseover=function(e){ 
        var eObj=e.srcElement || e.target; 
        eObj.style.backgroundColor="#e5e5e5"; 
    } 
    this.mouseout=function(e){ 
        var eObj=e.srcElement || e.target; 
        eObj.style.backgroundColor="#EEEEEE"; 
    } 
    this.click=function(e){ 
        var eObj=e.srcElement || e.target; 
        var item=this.items[eObj.id]["content"]; 
        item.style.display=="block"?item.style.display="none":item.style.display="block"; 
    } 
    this.init(); 

復制代碼代碼如下:

ldg.js 
var ldg=window.ldg || {} 
Array.prototype.append=function(item){ 
    this[this.length]=item 
} 
Function.prototype.bindAsEventListener=function(obj){ 
    var _method=this; 
    return function(event){ 
        return _method.call(obj,event || window.event); 
    } 
} 
ldg.event={ 
    addEvent:function(obj,evType,fun){ 
        if(obj.addEventListener){ 
            obj.addEventListener(evType,fun,false); 
            return true; 
        }else if(obj.attachEvent){ 
            obj.attachEvent("on"+evType,fun); 
            return true; 
        }else{return false} 
    } 
} 
ldg.common={ 
    $:function(id){ 
        return document.getElementById(id);     
    }, 
    setClassName:function(eleType,className){ 
        var element=document.createElement(eleType) 
        element.className=className; 
        return element; 
    } 
} 

復制代碼代碼如下:

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>testBlog</title> 
        <link rel=stylesheet type=text/css href="css/window.css"> 
        <link rel=stylesheet type=text/css href="css/bg.css"> 
        <script src="js/prpwin.js"></script> 
        <script src="js/ldg.js"></script> 
        <script> 
            window.onload=function(){         
                var pop=new PopWin(1,440,"標題"); 
                pop.addItem(1,"默認主題"); 
                pop.addItem(2,"2222"); 
                pop.addItem(3,"3333"); 
                pop.addItem(4,"4444"); 
                pop.addItemContent(1,"images/1.gif","css/bg2.css"); 
                pop.addItemContent(1,"images/2.gif","css/bg3.css"); 
                pop.addItemContent(1,"images/3.gif","css/bg4.css"); 
                pop.addItemContent(1,"images/4.gif","css/bg5.css"); 
                pop.addItemContent(1,"images/5.gif","css/bg6.css"); 
                pop.addItemContent(1,"images/1.gif","css/bg7.css"); 
                pop.addItemContent(1,"images/2.gif","css/bg8.css"); 
                pop.addItemContent(1,"images/3.gif","css/bg9.css"); 
                pop.addItemContent(1,"images/4.gif","css/bg0.css"); 
                pop.addItemContent(1,"images/5.gif","css/bg4.css"); 
                pop.addItemContent(1,"images/6.gif","css/bg2.css",true); 
                pop.addItemContent(2,"images/7.gif","css/bg8.css"); 
                pop.addItemContent(2,"images/8.gif","css/bg6.css"); 
                pop.addItemContent(2,"images/9.gif","css/bg3.css"); 
                pop.addItemContent(2,"images/10.gif","css/bg2.css"); 
                pop.addItemContent(2,"images/11.gif","css/bg6.css"); 
                pop.addItemContent(2,"images/12.gif","css/bg4.css",true); 
                pop.addItemContent(3,"images/13.gif","css/bg9.css");     
                pop.addItemContent(3,"images/14.gif","css/bg1.css");     
                pop.addItemContent(3,"images/15.gif","css/bg7.css",true); 
                pop.addItemContent(4,"images/4.gif","css/bg9.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/1.gif","css/bg5.css"); 
                pop.addItemContent(4,"images/2.gif","css/bg2.css"); 
                pop.addItemContent(4,"images/3.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg0.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg7.css"); 
                pop.addItemContent(4,"images/1.gif","css/bg4.css"); 
                pop.addItemContent(4,"images/2.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg7.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg1.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg1.css",true); 
            } 

        </script> 
    </head> 
    <body> 

    </body> 
</html> 