Körívet bejáró objektumok 3416
Mozillában is működik
Mozillában csak akkor működik, ha kiiktatjuk a DOCTYPE meghatározást:
<-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
Azon div szakaszt, melyben a kockakép mozog, utólagosan állítjuk be arra a méretre, melyet az adott mozgó objektum bejár.
Ha nem készítünk div szakaszt, akkor a mozgó objektum, a dokumentumunk szövegterületén mozog.
Teszteljük le úgy is, hogy a <div class="bemutato"> szakaszt, töröljük programunkból.
XHTML fájl
<div class="bemutato">
<script type="text/javascript" language="javascript" src="js_fájl_elérési_út.js"> </script>
</div>
CSS fájl
.bemutato{ width: 700px; height: 380px; border: 1px solid black; background-color: #ccff33; margin-left: 30px; }
#vonal1, #vonal2, #vonal3, #vonal4, #vonal5, #vonal6, #vonal7, #vonal8, #vonal9, #vonal10 {position:absolute; width: 10px; height: 10px; font-size: 8px; background-color: aqua; text-align: center; padding:1px;}
JavaScript fájl
// A nagy "X" és "Y" értékei határozzák meg, a kör központját
var X = 260;
var Y = 260;
var vh= 10; //Mozgatandó rétegek közötti távolság. (vonal, vagy mutató hosszát határozza meg)
//Adott pont vagy objektum, y koordinátájának szorzója
//Adott pont vagy objektum, x koordinátájának szorzója
// Ha, kicsi "y" és "x" értéke nem egyforma, akkor tojás alakú kört ír le, a mutató vége
var y1tavolsag = 0;
var x1tavolsag = 0;
var y2tavolsag = 2;
var x2tavolsag = 2;
var y3tavolsag = 4;
var x3tavolsag = 4;
var y4tavolsag = 6;
var x4tavolsag = 6;
var y5tavolsag = 8;
var x5tavolsag = 8;
var y6tavolsag = 10;
var x6tavolsag = 10;
var y7tavolsag = 12;
var x7tavolsag = 12;
var y8tavolsag = 14;
var x8tavolsag = 14;
var y9tavolsag = 16;
var x9tavolsag = 16;
var y10tavolsag =18;
var x10tavolsag =18;
document.write('<span id="vonal1">1</span>');
document.write('<span id="vonal2">2</span>');
document.write('<span id="vonal3">3</span>');
document.write('<span id="vonal4">4</span>');
document.write('<span id="vonal5">5</span>');
document.write('<span id="vonal6">6</span>');
document.write('<span id="vonal7">7</span>');
document.write('<span id="vonal8">8</span>');
document.write('<span id="vonal9">9</span>');
document.write('<span id="vonal10">10</span>');
function egyenes() {
var ido = new Date ();
var masodperc = ido.getSeconds();
var mp = -1.57 + Math.PI * masodperc/30;
vonal1.style.top = Y +vh * y1tavolsag * Math.sin(mp);
vonal1.style.left = X +vh * x1tavolsag * Math.cos(mp);
vonal2.style.top = Y + vh * y2tavolsag * Math.sin(mp);
vonal2.style.left = X + vh * x2tavolsag * Math.cos(mp);
vonal3.style.top = Y + vh * y3tavolsag * Math.sin(mp);
vonal3.style.left = X + vh * x3tavolsag * Math.cos(mp);
vonal4.style.top = Y + vh * y4tavolsag * Math.sin(mp);
vonal4.style.left = X + vh * x4tavolsag * Math.cos(mp);
vonal5.style.top = Y + vh * y5tavolsag * Math.sin(mp);
vonal5.style.left = X + vh * x5tavolsag * Math.cos(mp);
vonal6.style.top = Y + vh * y6tavolsag * Math.sin(mp);
vonal6.style.left = X + vh * x6tavolsag * Math.cos(mp);
vonal7.style.top = Y + vh * y7tavolsag * Math.sin(mp);
vonal7.style.left = X + vh * x7tavolsag * Math.cos(mp);
vonal8.style.top = Y + vh * y8tavolsag * Math.sin(mp);
vonal8.style.left = X + vh * y8tavolsag * Math.cos(mp);
vonal9.style.top = Y + vh * y9tavolsag * Math.sin(mp);
vonal9.style.left = X + vh * x9tavolsag * Math.cos(mp);
vonal10.style.top = Y + vh * y10tavolsag * Math.sin(mp);
vonal10.style.left = X + vh * x10tavolsag * Math.cos(mp);
setTimeout('egyenes()', 50);
}
window.onload = egyenes;