The development of the layer in the practical application of more important, such as floating ads, and so on, I have a brief discussion here.
1. Show or hide the control layer
Both methods are in fact controlled style.
Method One: Control Display Properties
<script language= "JavaScript" >
function Show (status)
{
document.getElementById ("Div1"). style.display = status;
}
</script>
<div id= "Div1" style= "LEFT:10PX;TOP:200PX;WIDTH:250;HEIGHT:100;Z-INDEX:2;" >
This is a layer, can see, hehe.
</div>
<a href=# onclick= "Show (' Block ');" > Show </a>
<a href=# onclick= "Show (' None ')" > Close </a>
Method II Control Visibility properties
<script language= "JavaScript" >
function Show (status)
{
document.getElementById ("Div1"). style.visibility = status;
}
<div id= "Div1" style= "Left:10px;top:200px;width:250;height:100;z-index:2;visibility=hideen;" >
This is a layer, can see, hehe.
</div>
<a href=# onclick= "show (' visible);" > Show </a>
<a href=# onclick= "Show (' Hidden ')" > Close </a>
If you want the control layer to shut down regularly, you can add:
function Settimestart ()
10 {
One window.settimeout (hiddentips,4000);
12}^
</script>
The code above is to use the SetTimeout method to control the shutdown layer after 4 seconds.
2. Control layer of movement, similar to floating advertising
The main thing is to move through the values of the top and left properties in the control layer style, by randomly generating different values that look like they are in motion.
<script language= "JavaScript" >
var a=200, b=100;
var c=0.1;
var d=5;
var t=0;
function float_1 ()
{
var random1 = 100*math.random ();
var random2 = 100*math.random ();
var float_1 = document.all? document.all.float_1.style:document.float_1;
Float_1.left = Math.Round (A*math.cos (t) *math.cos (T/D) +a) +random1;
Float_1.top = Math.Round (B*math.sin (t) +b) +random2;
T+=c;
SetTimeout ("float_1 ()", 500);
}
</script>
<body onload= "float_1 ()" ><div id= "float_1" style= "Position:absolute;width:200;height:100;z-index:2"; Visibility:visible ">
Let me move.
</div>
</body>
Call through the SetTimeout method, run every few seconds, to achieve the purpose of the movement.
