可以用鼠标拖动的表格-JS特效-爱易网页

可以用鼠标拖动的表格

日期：2014-05-18　浏览次数：20299 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>爱易网网页特效演示，可以用鼠标拖动的表格</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;    //当前拖动对象
var relLeft;    //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
    currentMoveObj = obj;        //当对象被按下时，记录该对象
    currentMoveObj.style.position = "absolute";
    relLeft = event.x - currentMoveObj.style.pixelLeft;
    relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
    if(currentMoveObj != null)
    {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
    }
}

//-->
</SCRIPT>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
    <TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
    <TD align="center" height="60">content</TD>
</TR>
</TABLE>
</body>

</html>

<a href="http://www.aiyiweb.com/js/">欢迎访问爱易网JS特效</a>

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

可以用鼠标拖动的表格

相关资料更多>

推荐阅读更多>