项目需要一个可移动的DIV窗口,要求调用简单,可以重用。本人马上就考虑到使用OO了。代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
</HEAD>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
var qtD = document;
function $(id){
return getObj(id);
}
function getObj(id){
return qtD.getElementById(id);
}
function cleanDiv(obj){
(typeof(obj)==”string”?$(obj):obj).innerHTML=”;
}
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
var qtD = document;
function $(id){
return getObj(id);
}
function getObj(id){
return qtD.getElementById(id);
}
function cleanDiv(obj){
(typeof(obj)==”string”?$(obj):obj).innerHTML=”;
}
function msgWindow(msgContext){
this.width=400;
this.height=300;
this.title = ”;
this.content = ”;
this.context = (typeof(msgContext)==”string”?$(msgContext):msgContext);
this.height=300;
this.title = ”;
this.content = ”;
this.context = (typeof(msgContext)==”string”?$(msgContext):msgContext);
this.popup = function(){
var left = (screen.width – this.width) / 2;
var top = (screen.height – this.height) / 2 -20;
this.context.innerHTML ='<div id=”msgwin” style=”position:absolute;left:’+left+’px;top:’+top+’px;width:’+this.width+’px; height:’+this.height+’px; border:#999999 1pt solid; background-color:#F7F7F7″>’+
‘<div id=”title_0″ style=”width:100%; height:30px; background-image:url(http://www.1363.cn/images/btn_close.gif” onclick=”javascript:cleanDiv(\’context\’)” style=”cursor:hand; margin-top:6px;”/></div></div>’+
‘<div id=”txt” style=”width:95%; height:90%; text-align:left;overflow: hidden; padding-left:10px;line-height:24px; color:#333333; font-size:12px; “>’+this.content+'</div></div>’;
document.onmousedown=initDrag;
document.onmouseup=new Function(“isdrag=false”);
}
}
var left = (screen.width – this.width) / 2;
var top = (screen.height – this.height) / 2 -20;
this.context.innerHTML ='<div id=”msgwin” style=”position:absolute;left:’+left+’px;top:’+top+’px;width:’+this.width+’px; height:’+this.height+’px; border:#999999 1pt solid; background-color:#F7F7F7″>’+
‘<div id=”title_0″ style=”width:100%; height:30px; background-image:url(http://www.1363.cn/images/btn_close.gif” onclick=”javascript:cleanDiv(\’context\’)” style=”cursor:hand; margin-top:6px;”/></div></div>’+
‘<div id=”txt” style=”width:95%; height:90%; text-align:left;overflow: hidden; padding-left:10px;line-height:24px; color:#333333; font-size:12px; “>’+this.content+'</div></div>’;
document.onmousedown=initDrag;
document.onmouseup=new Function(“isdrag=false”);
}
}
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY – y : nTY + event.clientY – y)+”px”;
oDragObj.style.left = (nn6 ? nTX + e.clientX – x : nTX + event.clientX – x)+”px”;
return false;
}
}
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY – y : nTY + event.clientY – y)+”px”;
oDragObj.style.left = (nn6 ? nTX + e.clientX – x : nTX + event.clientX – x)+”px”;
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
if(oDragHandle.tagName!=’DIV’ || oDragHandle.id==’txt’)return;
var topElement = “HTML”;
while (oDragHandle.tagName != topElement && oDragHandle.id != “msgwin”) {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.id==”msgwin”) {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
var oDragHandle = nn6 ? e.target : event.srcElement;
if(oDragHandle.tagName!=’DIV’ || oDragHandle.id==’txt’)return;
var topElement = “HTML”;
while (oDragHandle.tagName != topElement && oDragHandle.id != “msgwin”) {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.id==”msgwin”) {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
function testNotes(member_id,truename){
msg = new msgWindow(‘context’);
msg.title=”提示窗口”;
msg.content =’ 欢迎光临本站。’;
msg.popup();
}
//–>
</SCRIPT>
<div id=’context’></div>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
testNotes(1,’aa’);
//–>
</SCRIPT>
</BODY>
</HTML>
<!–
testNotes(1,’aa’);
//–>
</SCRIPT>
</BODY>
</HTML>