示例
关键字: javascript, dhtml, div, 层, 移动
本文提供了一个通过javascript+dhtml脚本实现在IE浏览器里面显示的可以被鼠标拖动的层。这个层能够自动滚动或者被关闭，就像我的Z-Tips一样:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language=javascript>
// bigin fly bar
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
function HideFlyBar(){
divFlyBar.style.visibility = "hidden";
myFlyBarRestorButton.style.display = '';
}
function openFlyBar(){
myload_flybar();
divFlyBar.style.visibility = "visible";
myFlyBarRestorButton.style.display = "none";
}
function catchFlyBar(e){
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-divFlyBar.style.pixelLeft;
dragClickY=y-divFlyBar.style.pixelTop;
divFlyBar.setCapture();
document.onmousemove = moveFlyBar;
}
function releaseFlyBar(e){
bIsCatchFlyBar = false;
divFlyBar.releaseCapture();
document.onmousemove = null;
}
function moveFlyBar(e){
if(bIsCatchFlyBar){
divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;
divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;
}
}
function myload_flybar(){
divFlyBar.style.top=document.body.scrollTop;
divFlyBar.style.left=document.body.offsetWidth-divFlyBar.clientWidth-30+document.body.scrollLeft;
}
window.onresize = myload_flybar;
window.onscroll = myload_flybar;
var webSiteID = 6;window.onload = openFlyBar;
// end fly bar
</script>
</HEAD>
<BODY>
<div id=divFlyBar width=192 border="0" cellspacing="1" cellpadding="0"><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle src="" align="absmiddle" border=0 width=12 height=12></td><td width=100% align=left> Z-Tips</td><td align=right valign=top><img src="" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle" ></td></tr></table></td></tr>
<tr id=flyTailerTr name=flyTailerTr><td id=flyTailerHolder name=flyTailerHolder New;' align=center>
在这里放置你想放的东西
在这里放置你想放的东西
在这里放置你想放的东西
在这里放置你想放的东西
在这里放置你想放的东西
</td></tr>
</table>
</div>
<div id=myFlyBarRestorButton name=myFlyBarRestorButton align=center valign=middle><input type=button value='▲ 显示 ▲' onclick=javascript:openFlyBar()></div>
</BODY>
</HTML>
