Weblap Hová jutunk?

Fotó vonalakak mozgatása köríven 3424

 

 

 

 

 

 

 

 

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 kör

CSS, azaz stílus fájl

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

#vP3424000, #vP3424090, #vP3424180, #vP3424270, #vP3424360 {position:absolute;}
/*Elforgatandó vonalak*/
#vPm3424000, #vPm3424090, #vPm3424180, #vPm3424270, #vPm3424360 {position:absolute;}

HTML fájl

<!--<!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>
<head> <title> Vonalak mozgása köríven </title>
<script type="text/javascript" language="javascript1.2" src="elérési út.js"> </script>

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="vv" />
<object id="VMLRender" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E"> </object>
<style> <!-- vv\:* { behavior: url(#VMLRender); } --> </style>

<link href="elérési út.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="pabsolut3424">
<vv:group id="vP3424000"> <vv:line to="950"> <vv:stroke weight="6px" color="red"/> </vv:line> </vv:group>
<vv:group id="vP3424090"> <vv:line to="950"> <vv:stroke weight="3px" color="black"/> </vv:line> </vv:group>
<vv:group id="vP3424180"> <vv:line to="950"> <vv:stroke weight="3px" color="blue"/> </vv:line> </vv:group>
<vv:group id="vP3424270"> <vv:line to="950"> <vv:stroke weight="3px" color="olive"/> </vv:line> </vv:group>
<vv:group id="vP3424360"> <vv:line to="450"> <vv:stroke weight="3px" color="yellow"/> </vv:line> </vv:group>

<!--Elforgatandó vonalak-->
<vv:group id="vPm3424000"> <vv:line to="950"> <vv:stroke weight="6px" color="red"/> </vv:line> </vv:group>
<vv:group id="vPm3424090"> <vv:line to="950"> <vv:stroke weight="3px" color="black"/> </vv:line> </vv:group>
<vv:group id="vPm3424180"> <vv:line to="950"> <vv:stroke weight="3px" color="blue"/> </vv:line> </vv:group>
<vv:group id="vPm3424270"> <vv:line to="950"> <vv:stroke weight="3px" color="olive"/> </vv:line> </vv:group>
<vv:group id="vPm3424360"> <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; // weboldali függőleges pozíció
var va=50; vb=400; // weboldali vízszintes pozíció
var wa=150; // width: Körív átmérő, mely körül, megjelennek a vonalak

var em=0; // elmozdulási fok

function PozicioKorIven() {
//Vonalak megjelenítése. A vonalak, egy négyzetet alkotnak
vP3424000.style.rotation =0; vP3424000.style.top=fa; vP3424000.style.left=va; vP3424000.style.width=wa;
vP3424090.style.rotation =90; vP3424090.style.top=fa; vP3424090.style.left=va; vP3424090.style.width=wa;
vP3424180.style.rotation =180; vP3424180.style.top=fa; vP3424180.style.left=va; vP3424180.style.width=wa;
vP3424270.style.rotation =270; vP3424270.style.top=fa; vP3424270.style.left=va; vP3424270.style.width=wa;
vP3424360.style.rotation =360; vP3424360.style.top=fa; vP3424360.style.left=va; vP3424360.style.width=wa;

//Vonalak elforgatása, em: elmozdulási fokot növeli
if(em <361) {
vPm3424000.style.rotation =0+em; vPm3424000.style.top=fb; vPm3424000.style.left=vb; vPm3424000.style.width=wa;
vPm3424090.style.rotation =90+em; vPm3424090.style.top=fb; vPm3424090.style.left=vb; vPm3424090.style.width=wa;
vPm3424180.style.rotation =180+em; vPm3424180.style.top=fb; vPm3424180.style.left=vb; vPm3424180.style.width=wa;
vPm3424270.style.rotation =270+em; vPm3424270.style.top=fb; vPm3424270.style.left=vb; vPm3424270.style.width=wa;
vPm3424360.style.rotation =360+em; vPm3424360.style.top=fb; vPm3424360.style.left=vb; vPm3424360.style.width=wa;
em++;
}
else em=0;

window.setTimeout("PozicioKorIven(); " , 100) ;
}

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