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&¶meters.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:
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.