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>

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..