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 e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Rotire obiecte HTML Div Imagine Span cu jQuery

Last accessed pages

  1. Exercitii engleza - English Tests and exercises - Grammar (25753)
  2. Gramatica limbii engleze - Prezentare Generala (101148)
  3. Viitor simplu si continuu - Future Tense Simple and Continuous (18966)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (50905)
  5. Gradele de comparatie: comparative, superlative (16088)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3160)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2345)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1783)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)