Zmiana tylko Y poz obrazu tła za pomocą Jquery

Chcę zmienić pozycję tła obrazu przycisku with za pomocą funkcji najeżdżania. Czy istnieje prosty sposób na zachowanie xpos lub najpierw powinienem uzyskać pozycję, podzielić go i ponownie użyć $ .css().Zmiana tylko Y poz obrazu tła za pomocą Jquery

Powinienem zmienić położenie tła wszystkich trzech przęseł, jeśli ktoś najechał na którykolwiek z nich. Tak więc bt_first: hover not wydaje się użyteczny.

Oto moje wykorzystanie. Pisałem #should pozostać sam # na miejscu, że nie chcesz zmienić wartość xpos:

$('.bt_first,.bt_sec,.bt_third').hover(function(){ 
     $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'}) 
},function(){ 
     $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -110px'}); 
});

Oto mój html .:

<div><a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a></div>

i CSS:

.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span { 
    background: url('img/toolbar_bckrnd.png') no-repeat; 
} 
.bt_first { 
    background-position: left -110px; 
    display: inline-block; 
    height: 24px; 
    width: 15px; 
} 
.bt_sec { 
    background-position: -149px -110px; 
    display: inline-block; 
    height: 24px; 
    width: 2px; 
} 
.bt_third { 
    background-position: right -110px; 
    display: inline-block; 
    height: 24px; 
    padding: 0 10px; 
}

Źródło

2011-02-04 Kemal

podobne: http://stackoverflow.com/questions/2117594/adding- kwota-do-tła-pozycja-na-klik-jquery – thirtydot

@thirtydot Nie sądzę, że to jest to samo. Chcę zmienić tylko Ypos trzech różnych klas. xpos powinien pozostać predefiniowany. Twój post mówi o czymś innym. Czy się mylę? Dzięki i tak. – Kemal

Kemal: Powiedziałem * podobnie *, nie * to samo *. Pytanie to zawiera kod, który pozwala uzyskać "pozycję tła", podzielić dwie wartości, zmienić jedną z wartości i ustawić ją ponownie. Właśnie to próbujesz zrobić. – thirtydot

To powinno działać:

$('#add_comment_btn').hover(function(e) { 
    var s = e.type == 'mouseenter' ? '-134px' : '-110px';   
    $(this).children().css('background-position', function(i,v) { 
     return v.replace(/-?\d+px$/, s); 
    }); 
});

Odnosi się to do kotwicy #add_comment_btn. Jeśli masz wiele kotwic, po prostu użyj selektora klasy, aby wybrać je wszystkie.

btw powyższy kod jest w zasadzie taki sam jak kod podany w odpowiedzi. Właśnie pozbyłem się redundancji.

btw, jeśli nie chcesz, aby dodać klas do kotew, można je wybrać tak:

$('.bt_first, .bt_sec, .bt_third').parent().hover(.... the above code

Źródło

2011-02-05 00:14:41

Może tak:

var bg = $('#element').css('backgroundPosition').split(' '); 
bg[1] = '-200px'; 

$('#element').css('backgroundPosition', bg.join(' '));

Jako deseń Pozycja d zawsze jest przechowywana w kolejności horizontal vertical to powinno działać, ponieważ druga wartość tablicy jest zawsze wartością pionową.

Chociaż może to działać tylko z jednym elementem. Przy wielu elementach może być konieczne użycie pętli.

Źródło

2011-02-04 16:39:16 acme

dzięki. Działa, ale dobrze, gdybym zmienił tylko jedno tło. Muszę zmienić wszystko. Mam też więcej niż jeden przycisk. itd itd. to idzie skomplikowane. – Kemal

Zdecydowałem, że nie ma prostego rozwiązania i znaleźć wyjście na końcu. Jeśli ktoś tego potrzebuje, skrypt działa bez problemu.

$('.bt_first,.bt_sec,.bt_third').hover(
function(){ 
    var id = $(this).closest('a').attr('id'); 
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' '); 
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' '); 
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' '); 
    bg1[1] = '-134px'; 
    bg2[1] = '-134px'; 
    bg3[1] = '-134px'; 
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' ')); 
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' ')); 
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' ')); 
}, 
function(){ 
    var id = $(this).closest('a').attr('id'); 
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' '); 
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' '); 
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' '); 
    bg1[1] = '-110px'; 
    bg2[1] = '-110px'; 
    bg3[1] = '-110px'; 
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' ')); 
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' ')); 
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' ')); 
} 
);

Trzeba „A” tag „id” jako rodzica wszystkich elementów, a także te elementy muszą być najpierw Childs. W przeciwnym razie zmodyfikuj skrypt.

<a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a>

Źródło

2011-02-04 23:27:55 Kemal

Zmiana tylko Y poz obrazu tła za pomocą Jquery

Odpowiedz

Powiązane problemy