可移动层的实现示例

<!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" οnclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle" οnmοuseοver="divFlyBar.style.cursor='hand';" οnmοuseοut="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='▲ 显示 ▲' οnclick=javascript:openFlyBar()></div> </BODY> </HTML>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值