1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<HTML>
<BODY Background="rock_gra.gif" onload="startit();">
<DIV style="color:red; position:absolute; top:-40px; left:0px;">
<!-- <DIV style="opacity:0.4; 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:0.4; 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:0.4; 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 = 100/opac0;*/
d[1].style.left = d1x + "px";
d[1].style.top = d1y + "px";
/* d[1].style.opacity = 100/opac1;*/
d[2].style.left = d2x + "px";
d[2].style.top = d2y + "px";
/* d[2].style.opacity = 100/opac2;*/
setTimeout(movedivs, 10);
}
function startit() {
setTimeout(movedivs, 10);
}
</script>
</BODY>
</HTML>
|
