eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwbacground-position problem z przesunięciemRe: bacground-position problem z przesunięciem
  • Data: 2011-12-15 21:40:11
    Temat: Re: bacground-position problem z przesunięciem
    Od: Paweł Piskorz <n...@p...nie?> szukaj wiadomości tego autora
    [ pokaż wszystkie nagłówki ]

    W dniu 2011-12-15 15:43, Mateusz Krzysiak pisze:
    > mam taki kod
    >
    > <div id="pierwszy" style="bacground-position:35px 0px">
    > <div id="drugi" style="bacground-position:95px 0px">
    > <div id="trzeci" style="bacground-position:135px 0px">
    > <div id="czwarty" style="bacground-position:195px 0px">
    > .....
    > .....
    > itd. do około 100 pozycji
    >
    > Chcę aby po najechaniu na DIV myszą tło przesunęło się w osi Y o 35px
    > lecz nie modyfikowało przy tym pozycji osi X, czyli chciałbym zamienić
    > 0px na 35px

    Ech nie Ty jeden byś tak chciał, ale chłopaki się zatransitionowali w
    animacje i takie pierdoły jak background-position-y im nie w głowie :/
    Najłatwiej - podziel sobie ten obrazek na dwa i po prostu na hover
    zmieniaj sam obrazek. Czyli masz teraz:
    +---+---+---+ 0
    | A | B | C | ta część jest widoczna normalnie
    +---+---+---+ 35px
    | a | b | c | tę chcesz pokazywać przy :hover
    +---+---+---+
    podziel to na dwa osobne pliki:
    pierwszy:
    +---+---+---+
    | A | B | C | ta część jest widoczna normalnie
    +---+---+---+
    drugi:
    +---+---+---+
    | a | b | c | tę chcesz pokazywać przy :hover
    +---+---+---+
    i potem lecisz w stylach:
    .ikona.A { background-position:0 0; }
    .ikona.B { background-position:35px 0; }
    .ikona.C { background-position:95px 0; }
    i tak aż do tej setki, a na końcu:
    .ikona{ background-image:url(pierwszy); }
    .ikona:hover { background-image:url(drugi); }

    > napisałem skrypt w jQuery:
    > <script language="javascript" type="text/javascript">

    Samo <script> wystarczy.

    > $("#menu_top li").mouseover(function(){
    > $(this).css("background-position", "+=0px 36px");
    > }).mouseleave(function(){
    > $(this).css("background-position", "+=0px 0px");
    > });
    > </script>
    >
    > ale to nie za bardzo chce działać

    Witaj w świecie jQuery (to już bardziej pl.comp.lang.javascript, albo
    pl.pregierz ;))

    > może ktoś z tej grupy naprowadzić mnie na właściwe tory i podpowiedzieć
    > troszkę jak mam tego dokonać.

    "Na szczęście" metoda css przyjmuje jako parametr również funkcję, więc:
    $(this).css("background-position",function(i,s){retu
    rn s.replace( /
    0px/,' 35px')});
    i z powrotem:
    $(this).css("background-position",function(i,s){retu
    rn s.replace( /
    35px/, ' 0px')});


    --
    message[autor="PablO"]::after {
    content:"Pozdrawiam";
    }

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: