Copy codeThe Code is as follows:
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 ("");
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.tar get;
Var link = document. getElementsByTagName ("link ");
Link1_12.16.href=eobj.css;
}
This. mouseover = function (e ){
Var eObj = e. srcElement | e.tar get;
EObj. style. backgroundColor = "# e5e5e5 ";
}
This. mouseout = function (e ){
Var eObj = e. srcElement | e.tar get;
EObj. style. backgroundColor = "# EEEEEE ";
}
This. click = function (e ){
Var eObj = e. srcElement | e.tar get;
Var item = this. items [eObj. id] ["content"];
Item. style. display = "block "? Item. style. display = "none": item. style. display = "block ";
}
This. init ();
Copy codeThe Code is as follows:
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;
}
}
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> testBlog </title>
<Link rel = stylesheet type = text/css href = "css/plain 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, "title ");
Pop. addItem (1, "Default topic ");
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>