Home > Developer > JavaScript
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=# > Display </a>
<a href=# > 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=# > Display </a>
<a href=# > 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 ><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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
