js를 사용하여 소후 블로그 페이지 스타일 변경(간단 버전)

js를 사용하여 소후 블로그 페이지 스타일 변경(간단 버전)_javascript 기술

WBOY

풀어 주다： 2016-05-16 19:16:30

원래의

1111명이 탐색했습니다.

코드 복사 코드는 다음과 같습니다.

prowin.js 

/**
* @author ldgmc 
*/ 
함수 PopWin(id,width,title){ 
    this.id=id; 
    this.width=width; 
    this.title=제목; 
    this.createIns=function(){ 
        var ins=document.createElement("div"); 
        ins.className="popWin"; 
        ins.id=this.id; 
        ins.style.width=this.width 'px'; 
        반품 ;     
    }; 
    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="제목"; 
        var titleText=document.createTextNode(제목); 
        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][ "제목"],"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.대상; 
        var link=document.getElementsByTagName("link"); 
        링크[1].href=eObj.css; 
    }
    this.mouseover=function(e){ 
        var eObj=e.srcElement || e.대상; 
        eObj.style.BackgroundColor="#e5e5e5"; 
    } 
    this.mouseout=function(e){ 
        var eObj=e.srcElement || e.대상; 
        eObj.style.BackgroundColor="#EEEEEE"; 
    } 
    this.click=function(e){ 
        var eObj=e.srcElement || e.대상; 
        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 =이것; 
    return 함수(이벤트){ 
        return _method.call(obj,event || window.event); 
    } 
} 
ldg.event={ 
    addEvent:function(obj,evType,fun){ 
        if(obj.addEventListener){ 
           obj.addEventListener(evType,fun ,거짓); 
            true를 반환합니다. 
        }else if(obj.attachEvent){ 
            obj.attachEvent("on" evType,fun); 
            true를 반환합니다. 
        }else{return false} 
    } 
} 
ldg.common={ 
    $:function(id){ 
        return document.getElementById(id);     
    }, 
    setClassName:function(eleType,className){ 
        var element=document.createElement(eleType) 
        element.className=className; 
        반환 요소; 
    } 
} 

复代码代码如下:

testBlog




 <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>

<본문>