可移动层的实现示例
时间：2007-02-17 来源：PHP爱好者
关键字: 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>
php爱 好者站 http://www.ｐｈｐｆａｎｓ.net 文章|教程|下载|源码|论坛.
<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>
php爱 好者站 http://www.ｐｈｐｆａｎｓ.net 文章|教程|下载|源码|论坛.
相关阅读 更多 +
