拖动层- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 拖动层

Javascript: Web层改进II-用xmlhttp 无声息提交复杂表单; 用ADODB.Stream转换; html读出文本文件内容; 自适应高度框架 ----属个人收藏内容; Maps Javascript; JAVASCRIPT HashTable; 一页面多XMLHttpRequest对象; 网页javascript精华代码集; 判断浏览器的js代码; JS判断浏览器之Navigator对象; 用js自动判断浏览器分辨率的代码; 用JavaScript和注册表脚本实现右键收藏Web页选中文本; 判断页面是关闭还是刷新的js代码; WebGame《逆转裁判》完整版代码下载(1月24日更新); 叠加计算出错的解决方法; 一个轻量级的XHTML右键菜单[支持IE和firefox]; 一些易混淆且不常用的属性，希望有用; 网易首页的新闻代码; Flash对联广告的关闭按钮讨论; 用JS获得表格当前行数的代码

No. « ‹ 45 46 47 48 › »

技术文章搜索

关键字

Javascript 中的拖动层

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 126 ::

收藏到网摘: n/a

取得传值的函数按键测试，支持像 Ctrl+Alt+Shift+T 的组合键

点击运行可以看到效果:

<html>
<head>
<title>拖动层</title>
<style> td{font-size:12px;} /*模拟窗体*/ .vwin{ position:absolute; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 2px outset buttonshadow; border-right: 2px outset buttonshadow; } .vwintit{height:18px;background-color:#000099;color:#ffffff;font-weight:bold;cursor:move;} .vwinbody{background-color:#D6D3CE;}
</style>
</head>
<body> <table id="win01" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win01"> 窗口一</td> </tr> <tr> <td class="vwinbody" forid="win01"> </td> </tr> </table> <table id="win02" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win02"> 窗口二</td> </tr> <tr> <td class="vwinbody" forid="win02"> </td> </tr> </table> <table id="win03" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win03"> 窗口三</td> </tr> <tr> <td class="vwinbody" forid="win03"> </td> </tr> </table>
<script> //This javascript was writen by dron var md=false,mobj,ox,oy,index=1000; function document.onmousedown(){ winfocus(); if(event.srcElement.className=="vwintit") { md = true; mobj = document.getElementById(event.srcElement.forid); ox = mobj.offsetLeft - event.x; oy = mobj.offsetTop - event.y; } } document.onmouseup=function(){md=false;} function document.onmousemove() { if(md) { mobj.style.left = event.x + ox; mobj.style.top = event.y + oy; } } function winfocus() { fobj=document.getElementById(event.srcElement.forid); if(fobj==null){return false} if(fobj.style.zIndex!=index) { index = index + 1; fobj.style.zIndex=index; } } document.onclick=winfocus;
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

取得传值的函数按键测试，支持像 Ctrl+Alt+Shift+T 的组合键

Javascript 中的 拖动层

评论 (0) All

Javascript 中的拖动层