Mișcarea obiectelor în javascript - life-prog

Mișcarea unui element pe o pagină Web se realizează prin modificarea valorilor proprietăților care specifică coordonatele.
Schimbarea coordonatelor unui element poate fi implementată:

• printr-un proces ciclic organizat programatic;
• despre evenimentele mouse-ului;
• prin "legarea" elementului de cursorul mouse-ului, adică prin specificarea coordonatelor elementului, sunt egale cu coordonatele cursorului mouse-ului;
• la evenimentele tastaturii.

1 Schimbarea coordonatelor unui element folosind un proces ciclic

Pentru a organiza procesul ciclic, se pot utiliza următoarele metode ale obiectului ferestrei.

• setTimeout ("funcție sau expresie", interval [, lista argumentelor funcției, separate prin virgule]). evaluează valoarea unei expresii sau numește o funcție după un anumit interval (în milisecunde), dacă metoda anterior nu a fost apelată. poate transmite la funcția specificată în lista de argumente, returnează un pointer la timer-ul de obiect care poate fi utilizat în clearTimeout () metoda pentru a opri cronometrul și distrugerii;
• clearTimeout (temporizator). oprește cronometrul setat de metoda setTimeout ();
• setInterval ("funcție sau expresie", interval [, lista argumentelor funcției, separate prin virgule]). evaluează valoarea unei expresii sau numește o funcție de fiecare dată când expiră (în milisecunde) dacă metoda clearTimeout () nu a fost apelată înainte. poate transmite la funcția specificată în lista de argumente, returnează un pointer la timer-ul de obiect care poate fi utilizat în clearTimeout () metoda pentru a opri cronometrul și distrugerii;
• clearInterval (temporizator). oprește temporizatorul setat de setInterval ().

Utilizarea metodei setTimeout () pentru a organiza mișcarea unui element este prezentată în exemplul nr. 1, unde mișcarea elementului de pagină Web - litera Z dată de etichetă

, pe traiectoria sub formă de sinusoid ():

onClick = "moveTxt ()"> Z

In exemplul 1, folosind funcția f (x), implementat mișcarea obiectului de la dreapta la stânga și de sus în jos printr-o sinusoidă y = 60sin (x). După cum este indicat de un funcțiile traiectoriei trigometricheskoy pentru obiect Math, proprietățile și metodele care sunt descrise în secțiunea 3. Sarcina a fost utilizată Transformarea a fost efectuată păcat funcția argument (x) din grade în radiani. Direcția și viteza mișcării obiectului depind de magnitudinea și semnul incrementărilor coordonatelor dx și dy. Viteza de mișcare este, de asemenea, afectată de intervalul de timp prin care se produc aceste trepte (al doilea parametru al metodei setTimeout ()).

Alegerea amplitudinii și a vitezei de deplasare în exemplul 1 se face din motive de claritate.

Făcând clic pe mouse-ul pe litera Z, se numește funcția moveTxt (), care mișcă acest element din punctul ferestrei browserului cu coordonate: left = 0; top = 100 prin specificarea incrementelor la coordonatele sale din stânga și de sus:

până când se apropie de limitele ferestrei browserului (limita nu este atinsă, astfel încât litera Z rămâne în zona de vizibilitate completă).

Valorile din partea stângă și cea de jos a ferestrei browserului sunt determinate utilizând proprietățile etichetei clientWidth și clientHeight. Aceste proprietăți pot fi folosite pentru a determina dimensiunile oricăror elemente ale paginii Web care au o lățime și înălțime.
Când se folosesc metode alternative setInterval () și clearInterval (), descrierea funcției moveTxt () trebuie modificată într-o oarecare măsură:

funcția moveTxt ()
dacă ((z.style.pixelLeft30))
z.style.left = x + dx;
z.style.top = y + dy-f (x + dx);
dx + = 20;
dy + = 7;
>
altceva clearInterval (timer);
>

În plus, apelul pentru a mutaTxt () în acest caz ar trebui să fie efectuat după cum urmează:

2 Schimbarea coordonatelor unui element cu evenimentele mouse-ului

Mișcarea obiectelor Web pagină, pe întregul ecran, cu excepția metodei de mai sus își schimbă coordonatele sale folosind software-ul organizat proces ciclic, utilizatorul poate efectua Web-site-ul cu mouse-ul.

Folosind variabilele dx și dy. care își schimbă semnul pe contrariul atunci când sunt atinse limitele verticale sau orizontale ale ferestrei browserului, se realizează reflectarea legăturii atunci când se deplasează pe ecran de la margini.

Apelați funcția runRef () ca și cum ar fi fost un eveniment Mousemove. și pe evenimentul Mouseover oferă o protecție mai fiabilă a linkului de la clic pe mouse.

3 Trageți și plasați elemente

Glisarea elementelor unei pagini Web cu mouse-ul este realizată prin atribuirea coordonatelor curente ale elementului mutat la coordonatele curente ale mouse-ului. Accesul la coordonatele mouse-ului se poate face folosind proprietățile obiectului evenimentului.

• clientX - returnează coordonatele orizontale ale cursorului mouse-ului în raport cu partea client a ferestrei (excluzând cadrele, titlul, bara de meniu, bara de instrumente și bara de stare);
• clientY - returnează coordonatele verticale ale cursorului mouse-ului în raport cu partea client a ferestrei (fără cadre, titlu, bara de meniu, bara de instrumente și bara de stare);
• offsetX - returnează coordonatele orizontale ale cursorului mouse-ului în raport cu elementul de pagină care a cauzat acest eveniment;
• offsetY - returnează coordonatele verticale ale cursorului mouse-ului în raport cu elementul de pagină care a cauzat acest eveniment;
• screenX - returnează coordonatele orizontale ale cursorului mouse-ului față de ecran;
• screenY - returnează coordonatele verticale ale cursorului mouse-ului în raport cu ecranul;
• x - returnează coordonatele orizontale ale cursorului mouse-ului față de elementul părinte;
• y - returnează coordonatele verticale ale cursorului mouse-ului față de elementul părinte.

În exemplul nr. 3, este creată o pagină web care conține trei elemente - o imagine și două cuvinte "TEXT" de aceeași dimensiune, dar de culori diferite.

onContextmenu = "dacă (l == 2) l = 0; altfel l ++; return false"
onMousemove = "trageți ()">

text1

Text2

Când faceți clic pe mouse-ul pe oricare dintre aceste obiecte (Eveniment clic), ale obiectului marcat este setat modul de tragere: a n variabilă se înregistrează numărul de ordine al acestui element de web-pagini, de exemplu, pentru desen: n = 5, primul text: n = 6 pentru a doua: n = 7 (când faceți clic pe spațiul liber al ferestrei browserului, n ia valoarea 4 - numărul etichetei BODY).

Modul de tragere a obiectului marcat se realizează prin apelarea funcției drag () atunci când se mișcă mouse-ul (la evenimentul Mousemove), care efectuează următoarele acțiuni:

• stabilește poziția absolută a obiectului cu numărul n;
• atribuie coordonatele orizontale și verticale ale acestui obiect, respectiv coordonatele orizontale și verticale ale indicatorului mouse-ului, care îi permite să se miște în spatele mouse-ului în mișcare;
• stabilește valoarea curentă a proprietății indexului z la obiect. definită în variabila l.

Când faceți clic pe butonul mouse-ului dreapta (pentru evenimentul contextmenu) variază în mod ciclic valoarea variabilei l (0,1,2,0.) Setează valoarea curentă a z-index. care permite oricărui obiect să stabilească valoarea corespunzătoare sau să se suprapună cu alte obiecte de pe site-ul Web sau să fie amplasate sub ele.

Pentru a anula modul de tragere al obiectului marcat, trebuie să faceți clic din nou. În acest caz, numărul n al obiectului deja nou este introdus în variabila n, cea care a fost sub obiectul tras în momentul clicului. Acest lucru se datorează faptului că atunci când se mișcă, coordonatele indicatorului mouse-ului pe pixel sunt înaintea coordonatelor obiectului însuși. În acest caz, modul drag-and-drop este setat pentru noul obiect (cu excepția cazului în care obiectul este o etichetă BODY).

Trimiteți-le prietenilor: