可移动层的实现示例


答案：　　关键字: 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;
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>
上一个：学习网页制作基础入门教程
下一个：URL(地址)中的特殊字符
更多图片编程知识: