Creare efecte de miscare

Curs Javascript

Efectele de miscare in JavaScript se realizeaza prin executia repetata si foarte deasa a unei functii, la interval de cateva miimi de secunda, de obicei prin auto-apelare cu metoda setTimeout() inclusa in acea functie.
Un alt factor important in obtinerea efectului de miscare este lucru in JavaScript cu proprietatile si valorile CSS.
Efectul de miscare se realizeaza de fapt prin modificarea valorii uneia, sau mai multor proprietati CSS.
Se creaza o functie care face aceasta modificare, iar prin auto-apelarea ei foarte deasa, la interval de cateva miimi de secunda, face ca modificarea continua sa fie sesizata ca miscare.
Acestea ar fi, pe scurt, principiile de baza. Partea mai dificila este logica script-ului (in functie de efectul dorit) si lucrul cu proprietatile CSS in JS.

Inainte de a arata un exemplu practic, e util sa fie prezentate metodele de modificare si preluare a valorilor CSS a unui element din pagina web.
- Adaugarea sau modificarea valorii unei proprietati CSS cu JavaScript se face utilizand metoda "style", dupa urmatoarea sintaxa:
            element.style.proprietateCss = 'valoare'

- Preluarea valorii unei proprietati CSS se face diferit in principalele browsere (Mozilla Firefox si Internet Explorer); cu "defaultView.getComputedStyle()" pt. Firefox, si "currentStyle" pt. IE. Sau puteti folosi functia urmatoaare, cuprinde ambele metode si functioneaza in Firefox, IE, Opera, si altele.

// Functia preia valoarea elementelor css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';         // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop];         // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle) val_css = document.defaultView.getComputedStyle(el, "")[cssprop];         // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;         // Returneaza valoarea
}

- se apeleaza functia folosind formula: getStyle(element, proprietateCss)

1. Modificarea animata a lungimii unui element

Iata un prim exemplu din care se poate intelege modul de obtinere a efectului de miscare.
In acest exemplu, lungimea unui cadru (DIV) se va mari si micsora animat cand mouse-ul este pe el si dupa ce iese din zona lui.
Logica comenzilor din script e urmatoarea:
- Se defineste lungime la care sa ajunga cadrul.
- Se preia lungimea initiala a cadrului, pentru ca atunci cand sensul este de micsorare sa se opreasca la marimea initiala.
- Se creaza o functie in care se seteaza un indice de miscare, adica numarul de pixeli adaugati la fiecare apelare a functiei, cu valori pozitive si negative pentru schimbarea efectului de marire sau micsorare.
- Functia preia de fiecare data lungimea curenta a cadrului, si cat timp se afla intre valoarea ei initiala si lungimea maxima setata, va incrementa lungimea curenta cu indicele de miscare si se va auto-apela.
- La apelarea functiei cu "onmouseover" se trimite un parametru care sa seteze indicele de miscare pozitiv, iar la apeluul cu "onmouseout" se trimite un parametru care sa-l faca negativ.

Studiati si explicatiile din script.

<div id="idul" style="width:100px; height:100px; background-color:green;" onmouseover="changeL('ma')" onmouseout="changeL('mi')"> </div>

<script type="text/javascript"><!--
// Functia care preia valoarea css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';         // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop];         // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle) val_css = document.defaultView.getComputedStyle(el, "")[cssprop];         // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;         // Returneaza valoarea
}

var l_max = 300;         // Lungimea maxima la care sa ajunga ccadrul

var el = document.getElementById('idul');         // Obiectul elementului la care se aplica efectul

var l_ini = parseInt(getStyle(el, 'width'));         // Preia lungimea initiala a cadrului cu efectul (ca numar intreg)

// Functia pt. marirea si micsorarea dinamica
function changeL(sens){
    // Se defineste un indice de miscare, daca sens=ma e cu + pt marire, altfel e cu - pt micsorare
    var m = (sens=='ma') ? 4 : -4;

    var l_curent = parseInt(getStyle(el, 'width'));         // Preia lungimea curenta (ca numar intreg)

    // Daca "m" e pozitiv si lungimea curenta e mai mica decat cea maxima, sau, daca m<0 si lungimea curenta mai mare decat cea initiala
    // Adauga valoarea "m" la lungime px si auto-apeleaza functia cu parametru "sens"
    if((m>0 && l_curent<l_max) || (m<0 && l_curent>l_ini)){
        el.style.width = (l_curent+m)+'px';
        setTimeout('changeL("'+sens+'")', 10);
    }
}
//--></script>

- Acest script va returnaa urmatorul rezultat. Pozitionati mouse-ul pe patratul de mai jos.

2. Miscarea unui element in pagina

In acest al doilea exemplu se realizeaza miscarea unui cadru (DIV) in pagina, de la stanga la dreapta, si invers dupa oprire, la click cu mouse-ul pe el.
Logica acestuia este urmatoarea:
- Se defineste un indice de miscare, adica numarul de pixeli adaugati la fiecare apelare a functiei. Valoarea pozitiva sau negativa a acestui indice va schimba sensul miscarii.
- Se afla lungimea cadrului parinte, pentru ca sa se poata defini miscarea elementului din el pana in acea limita.
- Dupa ce se afla si lungimea elementului, se scade din cea a parintelui si se obtine lungimea de miscare.
- Se preia si valoarea marginii din stanga. Prin marirea sau micsorarea ei cadrul se muta.
- Se creaza o functie in care la fiecare apel se adauga indicele de miscare la lungimea din stanga si se auto-apeleaza pana cand marginea din stanga ajunge la valoarea lungimii maxime de miscare obtinute anterior. Atunci schimba sensul valorii indicelui de miscare din pozitiv in negativ, iar la urmatorul click pe element, prin adaugarea acestui indice la marginea din stanga, aceasta se va micsora, obtinandu-se efectul de miscare invers. Si apelul continua pana cand ajunge la 0, moment in care se schimba iar valoarea indicelui.

Studiati si explicatiile din codul scriptului.

<div id="idul" style="width:100px; height:100px; margin-left:0px; background-color:green;" onclick="set_move()"> </div>

<script type="text/javascript"><!--
// Functia care preia valoarea css (preluata si modificata de la www.javascriptkit.com)
function getStyle(el, cssprop){
    var val_css = '';         // Variabila cu valoarea CSS ce va fi returnata

    if(el.currentStyle) val_css = el.currentStyle[cssprop];         // Pentru browsere IE
    else if(document.defaultView && document.defaultView.getComputedStyle) val_css = document.defaultView.getComputedStyle(el, "")[cssprop];         // Pentru browsere Firefox
    else val_css = el.style[cssprop];

    return val_css;         // Returneaza valoarea
}

var im = 3;         // Indice de miscare (nr. pixeli adaugati la fiecare mutare)

var el = document.getElementById('idul');         // Obiectul elementului la care se aplica efectul

var el_p = el.parentNode;         // Preia elementul parinte al celui cu efectul

var lu_e = parseInt(getStyle(el, 'width'));         // Preia lungimea cadrului cu efectul (ca numar intreg)

var ml_e = parseInt(getStyle(el, 'marginLeft'));         // Preia valoarea marginii din stanga "marginLeft" (ca numar intreg)

var lu_p = parseInt(getStyle(el_p, 'width'));         // Preia lungimea zonei parinte "el_p" (ca numar intreg)

var l_m = lu_p - lu_e;         // Stabileste lungimea de miscare

// Functia pt. mutarea cadrului, dand efect de miscare
function set_move() {
    ml_e = ml_e + im;     // Modifica valoarea marginii din stanga cu "im"

    // Daca marginea din stanga "ml_e" e mai mica decat lungimea stabilita de miscare "l_m"
    // Muta elementul spre dreapta (mareste marginea din stanga) cu "ml_e" px si auto-apeleaza functia
    if(ml_e<l_m && ml_e>0){
        el.style.marginLeft = ml_e+'px';
        setTimeout('set_move()', 10);
    }
    else {
        im = - im;         // Schimba din pozitiv in negativ (si invers) valoarea lui "im" pentru a schimba sensul miscarii
    }
}
//--></script>

- Pentru a vedea rezultatul, dati click pe patratul verde de mai jos.

Pot apare probleme in efectele de miscare, in unele browsere (IE 7), cand valorile CSS folosite sunt pe "auto" si ele trebuie transformate in numere.
In efectele de miscare, si in general in functiile care lucreaza cu CSS, pe langa codul JavaScripi trebuie avut in vedere si valorile proprietatilor CSS care sunt sau nu definite.
- Lungimii si inaltimii unui element din pagina se pot prelua mai sigur cu metodele: element.offsetWidth respectiv element.offsetHeight.

<link href="/templ/style.css" rel="stylesheet" type="text/css" />

h2 {
  font-size: 1em;
}

document.getElementById("someID").innerHTML = "Continut HTML";

$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22

(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.

La nieve es blanca.
- Zapada e alba.