Exemple rotire obiecte HTML

In acest tutorial e prezentat un plugin jQuery care poate fi utilizat pt rotire obiecte HTML: Div, Span, <p>, imagini, si alte elemente HTML, la orice unghi. Rotirea poate fi realizata si cu efect animat.
- Acest plugin jQuery de rotire functioneaza in navigatoarele web moderne (Safari, Chrome, Opera, IE 9), si in IE 7.
- Poate fi descarrcat de la pagina jQueryRotate, sau copiati codul de mai jos si salvati-l intr-un fisier ".js" pe server (de ecemplu, cu numele "jqueryrotate3.js").
- Aceasta este versiunea 3.1, lansata in data 13.03.2012.

(function($){var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");for(var a=0;a<toCheck.length;a++)if(styles[toCheck[a]]!==undefined)supportedCSS=toCheck[a];var IE=eval('"v"=="\v"');jQuery.fn.extend({rotate:function(parameters)
{if(this.length===0||typeof parameters=="undefined")return;if(typeof parameters=="number")parameters={angle:parameters};var returned=[];for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(!element.Wilq32||!element.Wilq32.PhotoEffect){var paramClone=$.extend(true,{},parameters);var newRotObject=new Wilq32.PhotoEffect(element,paramClone)._rootObj;returned.push($(newRotObject));}
else{element.Wilq32.PhotoEffect._handleRotation(parameters);}}
return returned;},getRotateAngle:function(){var ret=[];for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(element.Wilq32&&element.Wilq32.PhotoEffect){ret[i]=element.Wilq32.PhotoEffect._angle;}}
return ret;},stopRotate:function(){for(var i=0,i0=this.length;i<i0;i++)
{var element=this.get(i);if(element.Wilq32&&element.Wilq32.PhotoEffect){clearTimeout(element.Wilq32.PhotoEffect._timer);}}}});Wilq32=window.Wilq32||{};Wilq32.PhotoEffect=(function(){if(supportedCSS){return function(img,parameters){img.Wilq32={PhotoEffect:this};this._img=this._rootObj=this._eventObj=img;this._handleRotation(parameters);}}else if(IE){return function(img,parameters){this._img=img;this._rootObj=document.createElement('span');this._rootObj.style.display="inline-block";this._rootObj.Wilq32={PhotoEffect:this};img.parentNode.insertBefore(this._rootObj,img);this._Loader(parameters);}}else{return function(img,parameters){this._rootObj=img;}}})();Wilq32.PhotoEffect.prototype={_setupParameters:function(parameters){this._parameters=this._parameters||{};if(typeof this._angle!=="number")this._angle=0;if(typeof parameters.angle==="number")this._angle=parameters.angle;this._parameters.animateTo=(typeof parameters.animateTo==="number")?(parameters.animateTo):(this._angle);this._parameters.step=parameters.step||this._parameters.step||null;this._parameters.easing=parameters.easing||this._parameters.easing||function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;}
this._parameters.duration=parameters.duration||this._parameters.duration||1000;this._parameters.callback=parameters.callback||this._parameters.callback||function(){};if(parameters.bind&&parameters.bind!=this._parameters.bind)this._BindEvents(parameters.bind);},_handleRotation:function(parameters){this._setupParameters(parameters);if(this._angle==this._parameters.animateTo){this._rotate(this._angle);}
else{this._animateStart();}},_BindEvents:function(events){if(events&&this._eventObj)
{if(this._parameters.bind){var oldEvents=this._parameters.bind;for(var a in oldEvents)if(oldEvents.hasOwnProperty(a))
jQuery(this._eventObj).unbind(a,oldEvents[a]);}
this._parameters.bind=events;for(var a in events)if(events.hasOwnProperty(a))
jQuery(this._eventObj).bind(a,events[a]);}},_Loader:function(parameters)
{var width=this._img.width;var height=this._img.height;this._rootObj.appendChild(this._img);this._rootObj.style.width=this._img.offsetWidth;this._rootObj.style.height=this._img.offsetHeight;this._img.style.position="absolute";this._rootObj=this._img;this._rootObj.Wilq32={PhotoEffect:this}
this._rootObj.style.filter+="progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=1,M21=1,M22=1,sizingMethod='auto expand')";this._eventObj=this._rootObj;this._handleRotation(parameters);},_animateStart:function()
{if(this._timer){clearTimeout(this._timer);}
this._animateStartTime=+new Date;this._animateStartAngle=this._angle;this._animate();},_animate:function()
{var actualTime=+new Date;var checkEnd=actualTime-this._animateStartTime>this._parameters.duration;if(checkEnd&&!this._parameters.animatedGif)
{clearTimeout(this._timer);}
else
{if(this._canvas||this._vimage||this._img){var angle=this._parameters.easing(0,actualTime-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration);this._rotate((~~(angle*10))/10);}
if(this._parameters.step){this._parameters.step(this._angle);}
var self=this;this._timer=setTimeout(function()
{self._animate.call(self);},10);}
if(this._parameters.callback&&checkEnd){this._angle=this._parameters.animateTo;this._rotate(this._angle);this._parameters.callback.call(this._rootObj);}},_rotate:(function()
{var rad=Math.PI/180;if(IE)
return function(angle)
{this._angle=angle;var _rad=angle*rad;costheta=Math.cos(_rad);sintheta=Math.sin(_rad);var fil=this._rootObj.filters.item("DXImageTransform.Microsoft.Matrix");fil.M11=costheta;fil.M12=-sintheta;fil.M21=sintheta;fil.M22=costheta;this._rootObj.style.marginLeft=-(this._rootObj.offsetWidth-this._rootObj.clientWidth)/2+"px";this._rootObj.style.marginTop=-(this._rootObj.offsetHeight-this._rootObj.clientHeight)/2+"px";}
else if(supportedCSS)
return function(angle){this._angle=angle;this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";}})()}})(jQuery);

Includeti acest plugin dupa ce adaugati fisierul principal jQuery.
<script src="jquery_library.js" type="text/javascript"></script>
<script src="jqueryrotate3.js" type="text/javascript"></script>

Ca sa aplicati efectul de rotire la un obiect HTML, se foloseste aceasta sintaxa:
jQuery(element).rotate(parametru)
- parametru poate fi:
      1) Un simplu numar (pozitiv sau negativ) ce reprezintaa unghiul de rotire (initial e 0). Valoarea negativa face rotirea in sens invers orelor de ceas.
jQuery('$id').rotate(45);
      2) Un obiect ce contine parametri pt rotire, care suporta mai multe atribute pentru evenimente JavaScript si efect de animatie (vedeti in exemplele de mai jos).
jQuery('$id').rotate({angle:45});

In browser-ul Chrome, elementele HTML liniare (SPAN, B, I, U, STRONG) pot fi rotite cu acest plugin doar daca au setate proprietatea CSS position:absolute;, sau position:fixed; (exceptand <img>).

Exemple rotire obiecte HTML

• Studiati codul din exemplele urmatoare si testati-le singuri ca sa invatati cum se foloseste acest script jQuery de rotire.
1. Rotire Div 25 de grade, in sens invers orelor de ceas. DIV-ul e rotit cu tot continutul din el.
<div id="idex1" style="width:220px; background:#abefcd; padding:3px;">
 <p style="background:#fefefe;">Paragraf in DIV-ul rotit.</p>
 Curs JavaScript /jQuery: <a href="http://www.coursesweb.net/javascript/" title="Curs JavaScript-jQuery">www.coursesweb.net/javascript/</a>.
</div>

<script type="text/javascript"><!--
jQuery(document).ready(function() {
  $('#idex1').rotate(-25);
});
--></script>

Demo:

Paragraf in DIV-ul rotit.

Curs JavaScript /jQuery: www.coursesweb.net/javascript/.

2. Rotire simpla a unei imaginim cu 30 de grade.
<img src="image.jpg" width="120" height="45" alt="Rotire imagine" id="idex2" />

<script type="text/javascript"><!--
jQuery(document).ready(function() {
  $('#idex2').rotate(30);
});
--></script>

Demo:
Rotire imagine

animateTo

- Atributul animateTo creaza un efect de rotire animat, de la unghiul curent pana la o valoare data.
Exemplu:
    3. Rotire element SPAN cu 60 grade la fiecare clic pe el (cu efect animat).
Clic de cateva ori pe <span style="background:#08ed09; font-weight:bold; cursor:pointer;" id="idex3">Acest Text</span> ca sa vedeti efectul.

<script type="text/javascript"><!--
var angl = 60;      // unghiul de rotire

jQuery(document).ready(function() {
  $('#idex3').click(function() {
    // verifica daca browserul e Chrome, ca sa adauge "position:absolute"
    // deoarece elementele liniare trebuie pozitionate absolut (sau fixed) ca sa fie rotite in Chrome
    if($.browser.chrome) $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
    $(this).css('position','absolute');

    $(this).rotate({
      animateTo:angl
    });
    angl += 60;     // mareste unghiul cu 60 grade la fiecare rotire
  });
});
--></script>

Demo:
Clic de cateva ori pe Acest Text ca sa vedeti efectul.

bind, duration

bind e un obiect in care se pot adauga mai multe evenimente legate de elementul rotit.
Atributul duration specifica timpul de rotire (in milisecunde) cand se foloseste animateTo (default 1000).
Exemplu:
    4. Rotire tag H3 (positionat absolute intr-un Div) care descopera si ascunde un text la actiunea mouseover /mouseout.
<div style="position:relative;">Eu sunt acum, si tu esti.<h3 id="idex4" style="position:absolute; top:0; left:0; margin:0; background:#09ed09;"> Ce se ascunde aici ? </h3></div>

<script type="text/javascript"><!--
jQuery(document).ready(function() {
  jQuery('#idex4').rotate({bind: {
    mouseover: function() { 
      $(this).rotate({
        duration: 2500,
        animateTo:-35
      })},
    mouseout: function() { 
      $(this).rotate({
        duration: 500,
        animateTo:0
      })}
     }
  });
});
--></script>

Demo (asezati cursorul pe text):
Eu sunt acum,                 si tu esti.

Ce se ascunde aici ?




getRotateAngle , stopRotate

Functia getRotateAngle() returneaza unghiul curent al obiectului rotit.
Functia stopRotate() opreste rotirea.

in exemplul de mai jos sunt folosite alte doua functii ale acestui plugin jQuery de rotire (vedeti si comentariile din cod):
- callback specifica apelarea unei functii cand se termina efectul de rotire.
- Functia easing preia 5 parametri (x,t,b,c,d); x=nefolosit, t=timpul curent, b=valoarea de inceput, c=valoarea de modificare, d=durata.
Fara easing (rotire cu miscare egala):
easing: function(x, t, b, c, d) { return (t/d)*c ; }

Exemplu:
    5. Rotire DIV continuu, folosind "callback" ca sa auto-apeleze functia de rotire, si easing (pt o miscare de invartire liniara). Rotirea se opreste la clic pe DIV, si e afisat in el unghiul curent.
<div id="idex5" style="width:100px; height:80px; background:#08ed09;">Clic pt stop.</div>

<script type="text/javascript"><!--
jQuery(document).ready(function() {
  var rotation = function (){
    jQuery('#idex5').rotate({
      angle:0,            // reseteaza unghiul de rotire la 0 cand incepe rotatia
      // rotire 360 grade (invers orelor de ceas), in 3 secunde
      animateTo:-360, 
      duration: 3000,
      // auto-apeleaza functia rotation, ca sa invarta continuu
      callback: rotation,
      // adauga easing sa faca animatia mai naturala
      // x=nefolosit, t=timpul curent, b=valoarea de inceput, c=valoarea de modificare, d=durata
      easing: function (x,t,b,c,d){
        return c*(t/d)+b;       // miscare lina
      },
      // adauga bind sa lege evenimentul "click", opreste rotirea, preia si afiseaza unghiul curent
      bind: {
        click: function(){
          jQuery(this).stopRotate();
          jQuery(this).html('<br/> Unghi: <b>'+ $(this).getRotateAngle()+ '</b>');
      }}
     });
  }

  rotation();          // apeleaza functia pt pornire rotatie
});
--></script>

Demo (clic pe dreptunghiul verde):


Clic pt stop.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Rotire obiecte HTML Div Imagine Span cu jQuery

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (92215)
  2. Verbe reflexive 1 (2340)
  3. Substantivul din limba engleza - The Noun (22919)
  4. I sau Me (3223)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (31324)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2260)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (871)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)