Weblap Hová jutunk?

Fotó vonalak mozgása egy adott pont körül 3425

 

 

 

 

 

 

 

 

 

 

Mozillában nem működik.

A 0-fokos vonal hosszabb, és piros színnel van kiemelve, a 360-fokos vonal rövidebb, és sárga színnel van kiemelve.
Mivel, mindegyik ugyan azon pozícióban jelenik meg, az egyiket ki is hagyhatjuk a programunkból.
Ha, ugyan azon pozícióban két vonalat jelenítünk meg, az elsőnek adjunk más méreteket (vastagság, hosszúság, vagy mindkettő), mert a második vonal, az első felett jelenik meg, és az első nem lesz látható.

rotációs vonalközpont

rotációs pozíció

CSS, azaz stílus fájl

.pabsolut3425 {position: absolute; width: 700px; height: 350px; margin-top: 15px; margin-left: 50px; border: 1px solid black;)
vv { background-color: #ccc;}

#vP3425000, #vP3425090, #vP3425180, #vP3425270, #vP3425360 {position:absolute;}
#vPk3425000, #vPk3425090, #vPk3425180, #vPk3425270, #vPk3425360 {position:absolute;}
#vPm3425000, #vPm3425090, #vPm3425180, #vPm3425270, #vPm3425360 {position:absolute;}

HTML fájl, body szakasza

<body>
<div class="pabsolut3425">

<vv:group id="vP3425000"> <vv:line to="950"> <vv:stroke weight="6px" color="red"/> </vv:line> </vv:group>
<vv:group id="vP3425090"> <vv:line to="950"> <vv:stroke weight="3px" color="black"/> </vv:line> </vv:group>
<vv:group id="vP3425180"> <vv:line to="950"> <vv:stroke weight="3px" color="blue"/> </vv:line> </vv:group>
<vv:group id="vP3425270"> <vv:line to="950"> <vv:stroke weight="3px" color="olive"/> </vv:line> </vv:group>
<vv:group id="vP3425360"> <vv:line to="450"> <vv:stroke weight="3px" color="yellow"/> </vv:line> </vv:group>

<!-- Vonalak központba helyezése -->
<vv:group id="vPk3425000"> <vv:line to="950"> <vv:stroke weight="6px" color="red"/> </vv:line> </vv:group>
<vv:group id="vPk3425090"> <vv:line to="950"> <vv:stroke weight="3px" color="black"/> </vv:line> </vv:group>
<vv:group id="vPk3425180"> <vv:line to="950"> <vv:stroke weight="3px" color="blue"/> </vv:line> </vv:group>
<vv:group id="vPk3425270"> <vv:line to="950"> <vv:stroke weight="3px" color="olive"/> </vv:line> </vv:group>
<vv:group id="vPk3425360"> <vv:line to="450"> <vv:stroke weight="3px" color="yellow"/> </vv:line> </vv:group>

<!-- Vonalak mozgatása, egy adott pont körül -->
<vv:group id="vPm3425000"> <vv:line to="950"> <vv:stroke weight="3px" color="red"/> </vv:line> </vv:group>
<vv:group id="vPm3425090"> <vv:line to="950"> <vv:stroke weight="3px" color="black"/> </vv:line> </vv:group>
<vv:group id="vPm3425180"> <vv:line to="950"> <vv:stroke weight="3px" color="blue"/> </vv:line> </vv:group>
<vv:group id="vPm3425270"> <vv:line to="950"> <vv:stroke weight="3px" color="olive"/> </vv:line> </vv:group>
<vv:group id="vPm3425360"> <vv:line to="450"> <vv:stroke weight="3px" color="yellow"/> </vv:line> </vv:group>

</div>
<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>
</body>

JavaScript fájl

var fa=130; fb=130; fm=130; // weboldali függőleges pozíció
var va=50; vb=250; vm=500; // weboldali vízszintes pozíció
var wa=100; // width: Körív átmérő, mely körül, megjelennek a vonalak

// Kiszámoljuk a nagykör sugarát. (Azon kör sugara, melyből kiindulnak a vonalak)
var a=wa/2; b=wa/2;
var r=Math.sqrt((a*a)+(b*b));

var szin=135 // Rotációs, azaz elforgatandó vonalaknál, a "0" fokos vonal, "135" fokról indul
var tv= new Array();
for (i=0; i <361; i++) {
ya=Math.sin(szin * Math.PI / 180);
y=ya*r;
tv[i]=y;
//document.write(y+"
");
szin++;
}
var kosz=135
var tf= new Array();
for (i=0; i <361; i++) {
xb=Math.cos(kosz * Math.PI / 180);
x=xb*r;
tf[i] =x;
//document.write("-------------------- cos ---------"+x+"
"); kosz++;
}

var elm=0; // elmozdulási fok

function KozpontiPozicio() {
vP3425000.style.rotation =0; vP3425000.style.top=fa; vP3425000.style.left=va; vP3425000.style.width=wa;
vP3425090.style.rotation =90; vP3425090.style.top=fa; vP3425090.style.left=va; vP3425090.style.width=wa;
vP3425180.style.rotation =180; vP3425180.style.top=fa; vP3425180.style.left=va; vP3425180.style.width=wa;
vP3425270.style.rotation =270; vP3425270.style.top=fa; vP3425270.style.left=va; vP3425270.style.width=wa;
vP3425360.style.rotation =360; vP3425360.style.top=fa; vP3425360.style.left=va; vP3425360.style.width=wa;

//Vonalak központba helyezése
vPk3425000.style.rotation =0; vPk3425000.style.top=fb-tf[0]; vPk3425000.style.left=vb+tv[0]; vPk3425000.style.width=wa;
vPk3425090.style.rotation =90; vPk3425090.style.top=fb-tf[90]; vPk3425090.style.left=vb+tv[90]; vPk3425090.style.width=wa;
vPk3425180.style.rotation =180; vPk3425180.style.top=fb-tf[180]; vPk3425180.style.left=vb+tv[180]; vPk3425180.style.width=wa;
vPk3425270.style.rotation =270; vPk3425270.style.top=fb-tf[270]; vPk3425270.style.left=vb+tv[270]; vPk3425270.style.width=wa;
vPk3425360.style.rotation =360; vPk3425360.style.top=fb-tf[360]; vPk3425360.style.left=vb+tv[360]; vPk3425360.style.width=wa;

//Vonalak mozgatása, a központi pot körül
if(elm <361){ vonal2=elm+90; vonal3=elm+180; vonal4=elm+270;
if(elm>=270) {vonal2=elm-270;}
if(elm>=180) {vonal3=elm-180;}
if(elm>=90) {vonal4=elm-90;}
vPm3425000.style.rotation =0+elm; vPm3425000.style.top=fm-tf[elm]; vPm3425000.style.left=vm+tv[elm]; vPm3425000.style.width=wa;
vPm3425090.style.rotation =vonal2; vPm3425090.style.top=fm-tf[vonal2]; vPm3425090.style.left=vm+tv[vonal2]; vPm3425090.style.width=wa;
vPm3425180.style.rotation =vonal3; vPm3425180.style.top=fm-tf[vonal3]; vPm3425180.style.left=vm+tv[vonal3]; vPm3425180.style.width=wa;
vPm3425270.style.rotation =vonal4; vPm3425270.style.top=fm-tf[vonal4]; vPm3425270.style.left=vm+tv[vonal4]; vPm3425270.style.width=wa;
//vPm3425360.style.rotation =360+elm; vPm3425360.style.top=fm-tf[elm]; vPm3425360.style.left=vm+tv[elm]; vPm3425360.style.width=wa;

elm++;
}

else { elm=0;}

window.setTimeout("KozpontiPozicio(); " , 50) ;
}

if (document.all && window.print) { window.attachEvent("onload",KozpontiPozicio);}

Mozillában nem működik
Még akkor sem, ha a DOCTYPE meghatározást töröljük és natur HTML fájlt alkalmazunk