js 页面模块自由拖动实例

更新时间：2009年03月31日 00:18:56 作者：

js页面模块自由拖动实例代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js页面模块自由拖动</title> <style> .removableObj { height:25;position:relative; } </style> <script language="javascript"> var beginMoving=false; var sourceObj=null; var objectObj=null; function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture(); sourceObj=obj; objectObj=null; } function MouseMoveToMove(obj){ if(!beginMoving) return false; obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX); } function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; window.setTimeout("swapFun()",10); } function MouseOverFun(obj) { objectObj=obj; } function swapFun() { if(sourceObj!=null && objectObj!=null ) sourceObj.swapNode(objectObj); sourceObj=null; objectObj=null; } </script> </head> <body> 用鼠标移动TD(本代码也适合用鼠标进行其它对象的对换（如table,div等）) <table border="1" width="300"> <tr> <td bgcolor=red class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a1</td> <td bgcolor=blue class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a2</td> </tr> <tr> <td bgcolor=#cccccc class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b1</td> <td bgcolor=#eeeeee class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b2</td> </tr> </table> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

图片与文字半透明效果鼠标移上不透明
图片与文字结合的半透明效果，在正常状态下，一张图片的上面显示文字，为了区分背景，文字下方又重新布置了一个DIV
2009-10-10
JavaScript 地震特效
JavaScript 地震特效
2009-11-11
直接生成打开窗口代码，不必下载
用window.open实现打开窗口效果代码，主要用于信息的提示效果
2008-05-05
JavaScript 拖拽翻页效果代码
拖动翻页代码，很多人都想拥有这样一个功能，现在于JavaScript配合CSS终于实现了，个人感觉真的很不错，按住鼠标左键向某一方向拖动即可完成分页动作，符合WEB标准，兼容多浏览器。
2010-03-03
js星空效果代码
用js实现的星空效果代码，正壮观
2008-09-09
js新浪首页可关闭背景效果代码
新浪首页可关闭背景效果代码，每逢过节或遇到重大节日，新浪等门户的首页都为以此为背景，改变风格与事件对应，当然了用户可选择关闭背景，你现在看到的这款代码就是实现背景的关闭，实用简单。
2010-11-11
背景，文字渐变（无闪屏）
背景，文字渐变（无闪屏）...
2007-02-02
JavaScript 渐变效果页面图片控制
程序集合了宽度、高度、透明度、top、left的渐变，可以自定义渐变项目和各个项目的初始值结束值，还能以任意点（定点）为中心渐变。
2008-09-09
JavaScript判断窗口是否最小化的代码(跨浏览器)
有些朋友需要判断页面是不是被最小化了，然后再进行相应的操作。
2010-08-08
javascript背景颜色按时变换
javascript背景颜色按时变换...
2007-05-05