当前位置： 首页 > JS代码 > JS特效代码 > 表格图层 > 第1页

可拖动的层

来源：懒人图库2009-06-04

<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>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

↑上一篇：获取当前系统字体
↓下一篇：CSS表格斜线

广告代码

共338个JS广告代码

››全部

特效代码

共273个JS特效代码

››全部

最近浏览过的特效代码更多››