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

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

WBOY
WBOY원래의
2016-05-16 19:16:301083검색
코드 복사 코드는 다음과 같습니다.

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> <br>            window.onload=function(){         <br>                var pop=new PopWin(1,440,"标题"); <br>                pop.addItem(1,"默认主题"); <br>                pop.addItem(2,"2222"); <br>                pop.addItem(3,"3333"); <br>                pop.addItem(4,"4444"); <br>                pop.addItemContent(1,"images/1.gif","css/bg2.css"); <br>                pop.addItemContent(1,"images/2.gif","css/bg3.css"); <br>                pop.addItemContent(1,"images/3.gif","css/bg4.css"); <br>                pop.addItemContent(1,"images/4.gif","css/bg5.css"); <br>                pop.addItemContent(1,"images/5.gif","css/bg6.css"); <br>                pop.addItemContent(1,"images/1.gif","css/bg7.css"); <br>                pop.addItemContent(1,"images/2.gif","css/bg8.css"); <br>                pop.addItemContent(1,"images/3.gif","css/bg9.css"); <br>                pop.addItemContent(1,"images/4.gif","css/bg0.css"); <br>                pop.addItemContent(1,"images/5.gif","css/bg4.css"); <br>                pop.addItemContent(1,"images/6.gif","css/bg2.css",true); <br>                pop.addItemContent(2,"images/7.gif","css/bg8.css"); <br>                pop.addItemContent(2,"images/8.gif","css/bg6.css"); <br>                pop.addItemContent(2,"images/9.gif","css/bg3.css"); <br>                pop.addItemContent(2,"images/10.gif","css/bg2.css"); <br>                pop.addItemContent(2,"images/11.gif","css/bg6.css"); <br>                pop.addItemContent(2,"images/12.gif","css/bg4.css",true); <br>                pop.addItemContent(3,"images/13.gif","css/bg9.css");     <br>                pop.addItemContent(3,"images/14.gif","css/bg1.css");     <br>                pop.addItemContent(3,"images/15.gif","css/bg7.css",true); <br>                pop.addItemContent(4,"images/4.gif","css/bg9.css"); <br>                pop.addItemContent(4,"images/5.gif","css/bg3.css"); <br>                pop.addItemContent(4,"images/1.gif","css/bg5.css"); <br>                pop.addItemContent(4,"images/2.gif","css/bg2.css"); <br>                pop.addItemContent(4,"images/3.gif","css/bg3.css"); <br>                pop.addItemContent(4,"images/4.gif","css/bg0.css"); <br>                pop.addItemContent(4,"images/5.gif","css/bg7.css"); <br>                pop.addItemContent(4,"images/1.gif","css/bg4.css"); <br>                pop.addItemContent(4,"images/2.gif","css/bg3.css"); <br>                pop.addItemContent(4,"images/4.gif","css/bg7.css"); <br>                pop.addItemContent(4,"images/5.gif","css/bg1.css"); <br>                pop.addItemContent(4,"images/4.gif","css/bg1.css",true); <br>            } <br><br>        </script>
    
    <본문>

    


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.