天天看點

用層模拟可移動的小視窗

<html>

<head>

<title>_xWin</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<META NAME="Description" CONTENT="http://www.xuemu.net">

<style type='text/css'>

<!--

body{font-size:12px;}

a:visited{text-decoration:none;color:slategray;}

a:hover{text-decoration:underline;color:slategray;}

a:link{text-decoration:none;color:slategray;}

-->

</style>

<script language=JScript>

<!--

//??浠ユ????涓?s??浠?

var x0=0,y0=0,x1=0,y1=0;

var offx=6,offy=6;

var moveable=false;

var hover='orange',normal='#336699';//color;

var index=10000;//z-index;

//寮?濮?????

function startDrag(obj)

{

if(event.button==1)

{

//??瀹???棰???;

obj.setCapture();

//瀹?涔?瀵矽薄;

var win = obj.parentNode;

var sha = win.nextSibling;

//璁闆?榧?????灞?浣?缃?;

x0 = event.clientX;

y0 = event.clientY;

x1 = parseInt(win.style.left);

y1 = parseInt(win.style.top);

//璁闆?棰???

normal = obj.style.backgroundColor;

//?瑰??椋???

obj.style.backgroundColor = hover;

win.style.borderColor = hover;

obj.nextSibling.style.color = hover;

sha.style.left = x1 + offx;

sha.style.top = y1 + offy;

moveable = true;

}

}

//????

function drag(obj)

{

if(moveable)

{

var win = obj.parentNode;

var sha = win.nextSibling;

win.style.left = x1 + event.clientX - x0;

win.style.top = y1 + event.clientY - y0;

sha.style.left = parseInt(win.style.left) + offx;

sha.style.top = parseInt(win.style.top) + offy;

}

}

//??姝㈡????

function stopDrag(obj)

{

if(moveable)

{

var win = obj.parentNode;

var sha = win.nextSibling;

var msg = obj.nextSibling;

win.style.borderColor = normal;

obj.style.backgroundColor = normal;

msg.style.color = normal;

sha.style.left = obj.parentNode.style.left;

sha.style.top = obj.parentNode.style.top;

obj.releaseCapture();

moveable = false;

}

}

//?峰?????

function getFocus(obj)

{

if(obj.style.zIndex!=index)

{

index = index + 2;

var idx = index;

obj.style.zIndex=idx;

obj.nextSibling.style.zIndex=idx-1;

}

}

//??灏???;

function min(obj)

{

var win = obj.parentNode.parentNode;

var sha = win.nextSibling;

var tit = obj.parentNode;

var msg = tit.nextSibling;

var flg = msg.style.display=="none";

if(flg)

{

win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;

sha.style.height = win.style.height;

msg.style.display = "block";

obj.innerHTML = "0";

}

else

{

win.style.height = parseInt(tit.style.height) + 2*2;

sha.style.height = win.style.height;

obj.innerHTML = "2";

msg.style.display = "none";

}

}

//??寤轟?涓?瀵矽薄;

function xWin(id,w,h,l,t,tit,msg)

{

index = index+2;

this.id = id;

this.width = w;

this.height = h;

this.left = l;

this.top = t;

this.zIndex = index;

this.title = tit;

this.message = msg;

this.obj = null;

this.bulid = bulid;

this.bulid();

}

//??濮???;

function bulid()

{

var str = ""

+ "<div id=xMsg" + this.id + " "

+ "style='"

+ "z-index:" + this.zIndex + ";"

+ "width:" + this.width + ";"

+ "height:" + this.height + ";"

+ "left:" + this.left + ";"

+ "top:" + this.top + ";"

+ "background-color:" + normal + ";"

+ "color:" + normal + ";"

+ "font-size:8pt;"

+ "font-family:Tahoma;"

+ "position:absolute;"

+ "cursor:default;"

+ "border:2px solid " + normal + ";"

+ "' "

+ "慰nm慰used慰wn='getFocus(this)'>"

+ "<div "

+ "style='"

+ "background-color:" + normal + ";"

+ "width:" + (this.width-2*2) + ";"

+ "height:20;"

+ "color:white;"

+ "' "

+ "慰nm慰used慰wn='startDrag(this)' "

+ "慰nm慰useup='stopDrag(this)' "

+ "慰nm慰usem慰ve='drag(this)' "

+ "慰ndblclick='min(this.childNodes[1])'"

+ ">"

+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' 慰nclick='min(this)'>0</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' 慰nclick='ShowHide(/""+this.id+"/",null)'>r</span>"

+ "</div>"

+ "<div style='"

+ "width:100%;"

+ "height:" + (this.height-20-4) + ";"

+ "background-color:white;"

+ "line-height:14px;"

+ "word-break:break-all;"

+ "padding:3px;"

+ "'>" + this.message + "</div>"

+ "</div>"

+ "<div id=xMsg" + this.id + "bg style='"

+ "width:" + this.width + ";"

+ "height:" + this.height + ";"

+ "top:" + this.top + ";"

+ "left:" + this.left + ";"

+ "z-index:" + (this.zIndex-1) + ";"

+ "position:absolute;"

+ "background-color:black;"

+ "filter:alpha(opacity=40);"

+ "'></div>";

document.body.insertAdjacentHTML("beforeEnd",str);

}

//?劇ず????绐???function ShowHide(id,dis){

var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis

document.getElementById("xMsg"+id).style.display = bdisplay;

document.getElementById("xMsg"+id+"bg").style.display = bdisplay;

}

//-->

</script>

<script language='JScript'>

<!--

function initialize()

{

var a = new xWin("1",160,200,200,200,"绐???","xWin <br> A Cool Pop Div Window<br>XueMu.Net<br>2006-5-13");

var b = new xWin("2",240,200,100,100,"绐???","Welcome to visited my personal website:<br><a href=http://www.xuemu.net target=_blank>http://www.xuemu.net</a><br>璇峰???寤鴻????lt;br><br>??璋㈡?ㄧ???蟲敞锛?");

var c = new xWin("3",200,160,250,50,"绐???","Copyright by <a href='#'>Wildwind</a>!");

ShowHide("1","none");//????绐???

}

window.onload = initialize;

//-->

</script>

</head>

<base target="_blank">

<body onselectstart='return false' 慰nc慰ntextmenu='return false' >

<a 慰nclick="ShowHide('1',null);return false;" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >绐???</a>

<a 慰nclick="ShowHide('2',null);return false;" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >绐???</a>

<a 慰nclick="ShowHide('3',null);return false;" href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >绐???</a>

</body>

</html>

?

繼續閱讀