Curs Javascript

• Animare pozitie background
• Obtinere pozitie background

Acest tutorial arata cum se poate schimba, anima si obtine pozitia unei imagini de fundal (background) din elementele HTML, cu jQuery.
Daca doriti pur si simplu sa setati sau sa modificati pozitia imaginii de fundal, folositi aceasta sintaxa:
$(selector).css({ backgroundPosition: 'Xval Yval' })
- Xval - reprezinta valoarea pentru pozitia orizontala.
- Yval - reprezinta valoarea pentru pozitia verticala.

Exemple schimbare pozitie background

1. Cand se apasa pe un buton, plaseaza imaginea de fundal in dreapta-jos. 
<style type="text/css">
#idex1 {
 width:320px;
 height:80px;
 background:url('image.jpg') 0 0 no-repeat;
 border:1px solid blue;
}
</style>
<div id="idex1"></div>
<button id="bex1">Clic</button>
<script type="text/javascript"><!--
$('#bex1').click(function(){
  $('#idex1').css({backgroundPosition: '100% 100%'});
});
--></script>

Demo:

2. Cand cursorul mouse-ului e deasupra unui anumit element, centreaza pe orizontala imaginea de fundal, iar pe verticala 25 pixeli fata de marginea de sus (top). 
<style type="text/css">
#idex2 {
 width:320px;
 height:80px;
 background:url('image.jpg') 0 0 no-repeat;
 border:1px solid blue;
}
</style>
<div id="idex2"></div>
<script type="text/javascript"><!--
$('#idex2').mouseover(function(){
  $(this).css({backgroundPosition: '50% 25px'});
});
$('#idex2').mouseout(function(){
  $(this).css({backgroundPosition: '0 0'});
});
--></script>

Demo (plasati cursorul mouse-ului deasupra cadrului):

3. Cand se apasa pe un buton, shimba pozitia imaginii de fundal stanga, dreapta. 
<style type="text/css"><!--
#idex3 {
 background: url('image.jpg') 0 center no-repeat;
 width:400px;
 height:80px;
 border:1px dashed green;
}
--></style>
<div id="idex3"></div>
<button id="bex3">Clic</button>
<script type="text/javascript"><!--
// http://www.coursesweb.net
var ix = 1;
$('#bex3').click(function() {
  $('#idex3').css({ 'background-position': (100 * (ix % 2)) +'% 50%' });
  ix++;
});
--></script>

Demo (clic pe buton de cateva ori):

Animare pozitie background

Cea mai usoara metoda de a schimba pozitia imaginii de fundal cu o miscare animata, cu jQuery, este folosind urmatorul plugin (scris de Keith Wood - http://keith-wood.name/backgroundPos.html).
1. Copiati urmatorul cod intr-un fisier ".js" (de exemplu, cu numele "jquery_backgroundpos.js").

Plugin jQuery animare pozitie background

(function($){var BG_POS='bgPos';$.fx.step['backgroundPosition']=$.fx.step['background-position']=function(fx){if(!fx.set){var elem=$(fx.elem);var bgPos=elem.data(BG_POS);elem.css('backgroundPosition',bgPos);fx.start=parseBackgroundPosition(bgPos);fx.end=parseBackgroundPosition($.fn.jquery>='1.6'?fx.end:fx.options.curAnim['backgroundPosition']||fx.options.curAnim['background-position']);for(var i=0;i<fx.end.length;i++){if(fx.end[i][0]){fx.end[i][1]=fx.start[i][1]+(fx.end[i][0]=='-='?-1:+1)*fx.end[i][1];}}
fx.set=true;}
$(fx.elem).css('background-position',((fx.pos*(fx.end[0][1]-fx.start[0][1])+fx.start[0][1])+fx.end[0][2])+' '+
((fx.pos*(fx.end[1][1]-fx.start[1][1])+fx.start[1][1])+fx.end[1][2]));};function parseBackgroundPosition(value){var presets={center:'50%',left:'0%',right:'100%',top:'0%',bottom:'100%'};var bgPos=value.split(/ /);var decodePos=function(index){var pos=(presets[bgPos[index]]||bgPos[index]||'50%').match(/^([+-]=)?([+-]?\d+(\.\d*)?)(.*)$/);bgPos[index]=[pos[1],parseFloat(pos[2]),pos[4]||'px'];};if(bgPos.length==1&&$.inArray(bgPos[0],['top','bottom'])>-1){bgPos[1]=bgPos[0];bgPos[0]='50%';}
decodePos(0);decodePos(1);return bgPos;}
$.fn.animate=function(origAnimate){return function(prop,speed,easing,callback){if(prop['backgroundPosition']||prop['background-position']){this.data(BG_POS,this.css('backgroundPosition')||'center');}
return origAnimate.apply(this,[prop,speed,easing,callback]);};}($.fn.animate);})(jQuery);

2. Includeti plugin-ul in document HTML, dupa libraria de functii jQuery. 
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery_backgroundpos.js"></script>

3. Aplicati metoda animate(), cu aceasta sintaxa:
$(selector).animate({ backgroundPosition: 'Xval Yval' }, speed);
- Xval si Yval reprezinta valorile pe orizontala si verticala pt background. Acestea pot fi valori absolute (ex. -100px sau 50px), procente (ex. -25% sau 50%), valori relative (ex. -=200px sau +=20%), ori cu nume definit (top, left, right, bottom).
Daca valoarea pt verticala e omisa, se considera '50%'.
Daca nu e specificata unitatea de masura, se foloseste 'px'.
- "speed" - e optional, determina viteza animatiei ("fast", "slow", sau milisecunde).

Exemplu de cod:

$(selector).animate({backgroundPosition: '-120px 0'}, 1500); 
$(selector).animate({backgroundPosition: '30% -15%'}, 'fast');
$(selector).animate({backgroundPosition: '+=100px -=80px'}, 'slow', 'linear'); 
$(selector).animate({backgroundPosition: 'left bottom'});

Exemple Animare pozitie background

1. Cand se apasa pe un buton, muta animat imaginea de fundal din stanga-sus in dreapta-jos. 
<style type="text/css">
#idex4 {
 width:320px;
 height:80px;
 background:url('image.jpg') 0 0 no-repeat;
 border:1px solid blue;
}
</style>
<div id="idex4"></div>
<button id="bex4">Clic</button>
<script type="text/javascript"><!--
$('#bex4').click(function(){
  $('#idex4').animate({backgroundPosition: '100% 100%'}, 1500);
});
--></script>

Demo:

2. Muta imaginea de fundal alternativ stanga, dreapta, cu miscare animata. Afiseaza si numarul de clic-uri: 
<style type="text/css"><!--
#idex5 {
 background: url('image.jpg') 0 center no-repeat;
 width:400px;
 height:80px;
 border:1px dashed green;
}
--></style>
<div id="idex5"></div>
<button id="bex5">Clic</button>
<script type="text/javascript"><!--
// http://www.coursesweb.net
var vx = 1;
var nrclicks = 0;        // retine numarul de clic-uri
$('#bex5').click(function() {
  $('#idex5').animate({
    backgroundPosition: (100 * (vx % 2)) +'% 50%' }, 'slow', 'linear',
    // functie in animate() ca sa incrementeze si sa afiseze numarul de clic-uri
    function(){
      nrclicks++;
      $('#idex5').html('<h4>'+ nrclicks+ '</h4>')
    }
  );
  vx++;
});
--></script>

Demo (clic pe buton de cateva ori):

Obtinere pozitie background

Ca sa obtineti pozitia imaginii de background, folositi aceasta functie. 
// Returneaza un obiect cu valori pt pozitia background - http://snipplr.com/view/50791/
function getBackgroundPos(obj) {
  var pos = obj.css('background-position');
  if (pos == 'undefined' || pos == null) {
    // pt IE
    pos = [obj.css('background-position-x'),obj.css('background-position-y')];
  }
  else {
    pos = pos.split(' ');
  }
  return {
    x: parseFloat(pos[0]),
    xUnit: pos[0].replace(/[0-9-.]/g, ''),
    y: parseFloat(pos[1]),
    yUnit: pos[1].replace(/[0-9-.]/g, '')
  };
}
Aceasta functie returneaza un obiect cu patru proprietati:
      - x - valoarea numerica pt pozitia orizontala (in IE este transformata in pixeli).
      - xUnit - unitatea de masura pt valoarea "x" (in IE este 'px').
      - y - valoarea numerica pt pozitia verticala (in IE este transformata in pixeli).
      - yUnit - unitatea de masura pt valoarea "y" (in IE este 'px').

• Utilizare functie getBackgroundPos(): 
var bgpos = getBackgroundPos($('#id'));
  // bgpos.x
  // bgpos.xUnit
  // bgpos.y
  // bgpos.yUnit

Exemplu: 
<style type="text/css">
#idex6 {
 width:320px;
 height:80px;
 background:url('image.jpg') 50% 15% no-repeat;
 border:2px dotted green;
}
</style>
<div id="idex6"></div>
<button id="bex6">Get backgroundPosition</button>
<script type="text/javascript"><!--
// functie pt obtinere pozitie background
function getBackgroundPos(obj) {
  var pos = obj.css('background-position');
  if (pos == 'undefined' || pos == null) {
    // for IE
    pos = [obj.css('background-position-x'),obj.css('background-position-y')];
  }
  else {
    pos = pos.split(' ');
  }
  return {
    x: parseFloat(pos[0]),
    xUnit: pos[0].replace(/[0-9-.]/g, ''),
    y: parseFloat(pos[1]),
    yUnit: pos[1].replace(/[0-9-.]/g, '')
  };
}

// la clic pe #bex6
$('#bex6').click(function(){
  // obtine obiectul cu vaalori x/y background-position
  var bgpos = getBackgroundPos($('#idex6'));
  var Xval = bgpos.x + bgpos.xUnit;     // pozitia orizontala
  var Yval = bgpos.y + bgpos.yUnit;     // pozitia verticala

  alert('backgroundPosition: "'+ Xval+ ' '+ Yval+ '"');
});
--></script>

Demo:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a include fisier extern CSS in pagina web?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Ce proprietate CSS seteaza marimea textului?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicati proprietate JavaScript care poate sa adauge cod HTML intr-un element.
text value innerHTML
document.getElementById("someID").innerHTML = "Continut HTML";
Clic pe functia care returneaza numarul de caractere dintr-un sir in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Care este forma de feminin a adjectivului "white" (alb)?
white whitea whites
(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.
Care este forma de feminin a adjectivului "blanco" (alb)?
blanc blance blanca
La nieve es blanca.
- Zapada e alba.
jQuery background position

Last accessed pages

  1. Conditional (3000)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (65597)
  3. Gramatica limbii engleze - Prezentare Generala (210593)
  4. Proverbe, expresii si zicatori (22323)
  5. Substantive - Exercitii si teste engleza incepatori (38628)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1299)
  2. Curs HTML gratuit Tutoriale HTML5 (986)
  3. Coduri pt culori (738)
  4. Creare si editare pagini HTML (571)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (530)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide