Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2011, 10:54
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Сдвиг background'a
Доброе утро Мыслители.
Есть фоновое изображение с иконками. Ширина 60 пикселей, высота 90.
Допустим, что изначально стоит иконка с позициями (0 -30px)? но я не знаю второй координаты. Могу ли я сместить позицию на (-30px -30px)?
Спасибо заранее, буду благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2011, 11:13
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

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

Последний раз редактировалось Aetae, 26.11.2011 в 11:16.
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2011, 11:15
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Сообщение от Aetae Посмотреть сообщение
Можете.
Спасибо за столь насыщенный ответ. Теперь я буду знать что могу. А как не подскажете?
Ответить с цитированием
  #4 (permalink)  
Старый 26.11.2011, 11:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

<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>
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2011, 12:20
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Сообщение от Aetae Посмотреть сообщение
<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>
Я же писал, второй координаты (вертикальной) я не знаю и не могу знать. Если я сделаю так, то он меня перенесёт в верхний правый угол. А нужно только вправо сдвинуть.
Ответить с цитированием
  #6 (permalink)  
Старый 26.11.2011, 13:10
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

условие - размеры переданы в пикселях. в объекте указывается дельта (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>
Ответить с цитированием
  #7 (permalink)  
Старый 26.11.2011, 13:23
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сдвиг картинки-ссылки bpystep Общие вопросы Javascript 29 11.04.2013 11:07
IE7 - scrollLeft, лишний сдвиг Pumych (X)HTML/CSS 7 06.07.2011 14:07
javascript - сдвиг текста в лево и право nmmnmmn Opera, Safari и др. 1 23.04.2010 00:50
Сдвиг при изменении border mycoding (X)HTML/CSS 11 22.04.2010 09:38
JQuery и сдвиг DIVа slim jQuery 5 26.07.2009 17:21