管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用js实现的仿sohu博客更换页面风格（简单版）

复制代码 代码如下:

　　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>

教程首页 更多教程