js+css实现windows应用程序的拖动效果

kos — Thu, 26 Nov 2009 17:15:15 +0000

　　闲来无事，把以前学习的js整理了一下，在学习的过程，总会发现一些看上去貌似没用的东西，但在实际的应用中有可能会逐一的体会到那些东西的有用之处和优点．＂层＂这个东西对于我们来说并不陌生，如今的网页设计中，层的应用越来越广泛，这正是因为层给我们能带来一种独特的方便的页面的整齐效果，这之中也有很多让我们头痛的，比如＂赖皮广告＂，但我们在意的或许不是这个东西，如果说一个网站的赖皮广告很多的话，我可能只看一次，不进第二次，我们在意的是层给我们带来的方便．
　　仅此给大家分享一个能带来方便的层应用：windows的操作习惯应该说影响了绝大部分的网名，应用程序窗口的拖动可能每个人都接触过，把这个拖动效果应用到层上，就会在网页中就会带给我们同样的感觉．下面就是一个简单应用的实例，如有用得着的地方稍加改动就能变成你们想要的效果了



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>层拖动</title> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/moveTable.js"></script> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/moveTable.css"> </head>  <body> <a onClick="openFloatable()" class="win">点击我弹出层</a> <table width="400" border="0" cellspacing="0" cellpadding="0" id="floatTable">   <tr>     <th class="moveHead">我是表头（点我是可以拖动的哦）<span class="closeFloatable" onClick="closeFloatable()">关闭</span></th>   </tr>   <tr>     <td>鼠标移动到这个表头上，按住鼠标左键不放，你就可以随意的拖动这个层了，默认情况下，这个层弹出的位置上居在浏览器窗口的正中的，此功能由openFloatdiv()方法来实现这个层的定位．</td>   </tr> </table> </body> </html> 




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

相关下载：
　　js下载：moveTable.js
　　css下载：moveTable.css

散人笔记 » 层拖动

js+css实现windows应用程序的拖动效果