可移动层的实现示例

来源：互联网发布：索尼爱立信lt18i软件编辑：程序博客网时间：2024/05/17 22:59

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><script language=javascript>// bigin fly barvar bIsCatchFlyBar = false;var dragClickX = 0;var dragClickY = 0;function HideFlyBar(){divFlyBar.style.visibility = "hidden";myFlyBarRestorButton.style.display = '';}

window.onresize = myload_flybar;window.onscroll = myload_flybar;window.onload = openFlyBar;// end fly bar</script></HEAD><BODY><div id=divFlyBar onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()" style='position:absolute;top:0;left:1;visibility:hidden;cursor:move;z-index:100'><table style="filter:alpha(opacity=90);background-color:#9A9A9A;" width=192 border="0" cellspacing="1" cellpadding="0"><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle style="background-color:#212121;"><td><img src="http://www.webjx.com/images/logo.gif" align="absmiddle" border=0 width=12 height=12></td><td style="font-size:12px;color:#F4F4F4;font-weight:bold" width=100% align=left> Z-Tips</td><td align=right valign=top><img src="http://www.webjx.com/pic/button-Close.gif" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle" onmouseover="divFlyBar.style.cursor='hand';" onmouseout="divFlyBar.style.cursor='move';"></td></tr></table></td></tr><tr id=flyTailerTr name=flyTailerTr><td id=flyTailerHolder name=flyTailerHolder style='background-color:#eeeeee;color:black;font-weight:bold;font-size:12px;font-family:Courier New;' align=center>在这里放置你想放的东西<br>在这里放置你想放的东西<br>在这里放置你想放的东西<br>在这里放置你想放的东西<br>在这里放置你想放的东西<br></td></tr></table></div><div id=myFlyBarRestorButton name=myFlyBarRestorButton align=center valign=middle><input type=button value='▲ 显示 ▲' onclick=javascript:openFlyBar()></div></BODY></HTML>