Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Сдвиг background'a (https://javascript.ru/forum/jquery/23508-sdvig-background%27.html)

n1ko 26.11.2011 10:54
Сдвиг background'a
 
Доброе утро Мыслители.
Есть фоновое изображение с иконками. Ширина 60 пикселей, высота 90.
Допустим, что изначально стоит иконка с позициями (0 -30px)? но я не знаю второй координаты. Могу ли я сместить позицию на (-30px -30px)?
Спасибо заранее, буду благодарен.

Aetae 26.11.2011 11:13
Можете.
Вообще бессымсленный вопрос, никто кроме вас вашу "картинку с иконками" не видел.
Если допустить что все иконки там 30пх на 30пх, то в изначальном варианте у вас выбрана 1-я иконка 2-го ряда, во втором случе станет 2-я иконка 2-го ряда.

n1ko 26.11.2011 11:15
Цитата:
Сообщение от Aetae (Сообщение 139066)
Можете.
Спасибо за столь насыщенный ответ. Теперь я буду знать что могу. А как не подскажете? ;)

Aetae 26.11.2011 11:39 
<div style="
background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
width:76px;
height:76px;
"
onclick="this.style.backgroundPosition='-76px 0';">
</div>

n1ko 26.11.2011 12:20
Цитата:
Сообщение от Aetae (Сообщение 139069) 
<div style="
background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
width:76px;
height:76px;
"
onclick="this.style.backgroundPosition='-76px 0';">
</div>
Я же писал, второй координаты (вертикальной) я не знаю и не могу знать. Если я сделаю так, то он меня перенесёт в верхний правый угол. А нужно только вправо сдвинуть.

melky 26.11.2011 13:10
условие - размеры переданы в пикселях. в объекте указывается дельта (x-x0).

function lol(el, deltaObj/*{x:"+2",y:"-5"}*/){

    var pos = document.body.style.backgroundPosition||getComputedStyle(el,null).backgroundPosition;
    
    if(pos.match(/^(\d+)px\s(\d+)px$/))
        pos = { "x" : +RegExp.$1, "y" : +RegExp.$2 };
    else
        pos = { "x" : 0, "y" : 0 };
    
    el.style.backgroundPosition = pos.x + +(deltaObj.x||0) +"px "+(pos.y+ +(deltaObj.y||0))+"px";
}




<script>
function lol(b, c) { var a = document.body.style.backgroundPosition || getComputedStyle(b, null).backgroundPosition, a = a.match(/^(\d+)px\s(\d+)px$/) ? {x:+RegExp.$1, y:+RegExp.$2} : {x:0, y:0}; b.style.backgroundPosition = a.x + +(c.x || 0) + "px " + (a.y + +(c.y || 0)) + "px" }
</script>
<div style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) 84px 0px;width:76px; height:76px;" onclick="lol(this, {x:10, y:5});"></div>

n1ko 26.11.2011 13:23
Спасибо! Только сделал проще.
$('.button').live("mouseover", function(){
var bg = $(this).css('background-position');
var bg = bg.split(' ');
$(this).css({
'backgroundPosition': '-30px '+bg[1]
});
});


Часовой пояс GMT +3, время: 04:50.