gecko-dev/webshell/tests/viewer/samples/test13.html

127 lines
2.6 KiB
HTML
Raw Normal View History

<HTML>
<BODY Background="rock_gra.gif" onload="startit();">
<DIV style="color:red; position:absolute; top:-40px; left:0px;">
<!-- <DIV style="opacity:40%; color:red; position:absolute; top:-40px; left:0px;"> -->
<font point-size=200 face="verdana">
<b>Red</b>
</font></div>
<DIV style="color:darkgreen; position:absolute; top:50px; left:50px;">
<!-- <DIV style="opacity:40%; color:darkgreen; position:absolute; top:50px; left:50px;"> -->
<font point-size=200>
<b>Green</b>
</font></div>
<DIV style="color:blue; position:absolute; top:100px; left:100px;">
<!-- <DIV style="opacity:40%; color:blue; position:absolute; top:100px; left:100px;"> -->
<font point-size=200 face="comic sans ms">
<b>Blue</b>
</font></div>
<DIV style="background-color:pink; position:absolute; top:100px; left:100px;">
<font point-size=100 face="symbol">
<b>Opaque</b>
</font></div>
<script>
var d0x = -40, d0y = 0;
var d1x = 50, d1y = 50;
var d2x = 100, d2y = 100;
var d0xinc = 20, d0yinc = -20;
var d1xinc = -30, d1yinc = 20;
var d2xinc = 40, d2yinc = -30;
var opac0 = 40.0;
var opac1 = 40.0;
var opac2 = 40.0;
var opac0inc = 10.0;
var opac1inc = -10.0;
var opac2inc = 20.0;
function movedivs()
{
d=document.getElementsByTagName("div");
d0x += d0xinc;
d1x += d1xinc;
d2x += d2xinc;
d0y += d0yinc;
d1y += d1yinc;
d2y += d2yinc;
if ((d0x < -50) || (d0x > (window.innerWidth - 300)))
d0xinc = -d0xinc;
if ((d1x < -50) || (d1x > (window.innerWidth - 300)))
d1xinc = -d1xinc;
if ((d2x < -50) || (d2x > (window.innerWidth - 300)))
d2xinc = -d2xinc;
if ((d0y < -50) || (d0y > (window.innerHeight - 200)))
d0yinc = -d0yinc;
if ((d1y < -50) || (d1y > (window.innerHeight - 200)))
d1yinc = -d1yinc;
if ((d2y < -50) || (d2y > (window.innerHeight - 200)))
d2yinc = -d2yinc;
opac0 += opac0inc;
opac1 += opac1inc;
opac2 += opac2inc;
if (opac0 > 100.0)
{
opac0 = 100.0;
opac0inc = -opac0inc;
}
else if (opac0 < 0.0)
{
opac0 = 0.0;
opac0inc = -opac0inc;
}
if (opac1 > 100.0)
{
opac1 = 100.0;
opac1inc = -opac1inc;
}
else if (opac1 < 0.0)
{
opac1 = 0.0;
opac1inc = -opac1inc;
}
if (opac2 > 100.0)
{
opac2 = 100.0;
opac2inc = -opac2inc;
}
else if (opac2 < 0.0)
{
opac2 = 0.0;
opac2inc = -opac2inc;
}
d[0].style.left = d0x + "px";
d[0].style.top = d0y + "px";
/* d[0].style.opacity = opac0 + "%";*/
d[1].style.left = d1x + "px";
d[1].style.top = d1y + "px";
/* d[1].style.opacity = opac1 + "%";*/
d[2].style.left = d2x + "px";
d[2].style.top = d2y + "px";
/* d[2].style.opacity = opac2 + "%";*/
setTimeout(movedivs, 10);
}
function startit() {
setTimeout(movedivs, 10);
}
</script>
</BODY>
</HTML>