JavaScript a background-position: Jak napozicovat obrázek v pixelech vůči aktuální poloze?

by Zdeněk Večeřa 0 Comments

Na pozadí elementu máme napozicovaný obrázek například takto:

body { url(‘/img/obrazek_pozadi.jpg’) center top no-repeat; }

Obrázek je úplně nahoře (osa y) a vycentrovaný na střed (osa x). Místo center můžeme použít 50% a místo top 0%.

Představte si situaci, že ho potřebujeme pomocí JavaScriptu posunout o 60 pixelů vlevo (na ose x). V jQuery jsem nenašel způsob, jak to nějak jednoduše udělat. Přes $(‘body’).css(‘background-position’); mohu sice zjistit jeho pozici v procentech, ale nikoli v pixelech, což znamená, že nemáme 60 pixelů od čeho odečíst.

Pozici lze ale spočítat:

(((šířka_obrázkušířka_elementu) / 2) + posun) * -1;

Konkrétní příklad může vypadat takto:

var left = (((1980 – $(‘body’).width()) / 2) + 60) * -1;
 $(‘body’).css(‘background-position’, left + ‘px 0%’);

 

 



Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>