鼠标移动表格框

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 鼠标移动表格框 (http://www.webasp.net/javascript/1/492.htm)
-- 发布日期： 2005-06-14
<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<style type="text/css">
#home_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 10}

#home_label {width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 9}

#chiefs_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 12}

#chiefs_label {width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 11}

#members_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 14}

#members_label {width: 200; height: 50; position: absolute; top: 110; left: 300; z-index: 13}

#pictures_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 16}

#pictures_label {width: 200; height: 50; position: absolute; top: 110; left: 400; z-index: 15}
#links_tag {width: 200; height: 50; border-width: 1; border-color: black; border-style: solid; z-index: 18}

#links_label {width: 200; height: 50; position: absolute; top: 110; left: 500; z-index: 17}
</style>
<script language="JavaScript">
<!--
var where_to;

var the_timeout;
function moveIt()
{

if (background_tag.style.left<where_to)

{

background_tag.style.left=parseInt(background_tag.style.left) + 10;

}

if (background_tag.style.left>where_to)

{

background_tag.style.left=parseInt(background_tag.style.left) - 10;

}

the_timeout = setTimeout('moveIt()', 10);

}
function getOverIt(the_tag)
{
clearTimeout(the_timeout);

moveIt();

where_to=the_tag.style.left;

}
-->
</script>
<div id="background_tag" style="background: green; width: 200; height: 50; position: absolute; top: 110; left: 200; z-index: 8"></div>
<div id="home_tag" onMouseOver="getOverIt(home_tag);" style="position: absolute; top: 110; left: 200"></div>
<div id="chiefs_tag" onMouseOver="getOverIt(chiefs_tag);" style="position: absolute; top: 110; left: 200"></div>
<div id="members_tag" onMouseOver="getOverIt(members_tag);" style="position: absolute; top: 110; left: 300"></div>
<div id="pictures_tag" onMouseOver="getOverIt(pictures_tag);" style="position: absolute; top: 110; left: 400"></div>
<div id="links_tag" onMouseOver="getOverIt(links_tag);" style="position: absolute; top: 110; left: 500"></div>

webasp.net