115、跟着鼠标移动的色彩

115、跟着鼠标移动的色彩

脚本说明:

把如下代码加入<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>

 

Write a comment

Comments: 0