可移动层的实现示例

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

关键字: 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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航