Форум

optimismous · #1 (**permalink**) 26.10.2011, 13:41

Здравствуйте все. Имеется див с таким стилем:

div.bg {
background-position: center top;
}

Подскажите, пожалуйста, можно ли с помощью jquery сместить его текущую позицию по горизонтали на заданное количество пикселей?

ksa · #2 (**permalink**) 26.10.2011, 14:33

Сообщение от optimismous

можно ли с помощью jquery сместить его текущую позицию по горизонтали на заданное количество пикселей?

ЖиКвери тут не при чём... Позицию бекграунда можно лишь указать. Сместить относительно ч.л. - нет.

Как вариант саму картинку сделать "кособокой"...

Тогда при центрировании она будет смотреться смещёной относительно центра.

walik · #3 (**permalink**) 26.10.2011, 14:52

Сообщение от optimismous

Подскажите, пожалуйста, можно ли с помощью jquery сместить его текущую позицию по горизонтали на заданное количество пикселей?

Можно

<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
  </head>
  <body>
<div id="a"></div>
<button onclick="a();">Click</a>
<script>
function a() {
  $('#a').css({backgroundPositionX: '+=50px'});
}
</script>
<style>
#a {
  width: 200px;
  height: 50px;
  background-image: url(http://javascript.ru/forum/images/smilies/smile.gif);
  background-repeat: no-repeat;
  background-position: center top;
  border: 1px solid black;
}
</style>
  </body>
</html>

ksa · #4 (**permalink**) 26.10.2011, 19:42

Сообщение от walik

Можно

Давлю на кнопку (у меня Опера) - эфекта ноль.

ksa · #5 (**permalink**) 26.10.2011, 19:44

В ФФ - ноль...

ksa · #6 (**permalink**) 26.10.2011, 19:49

Да и тут
http://jquery-docs.ru/css/css/

Про такое '+=50px' нет ни слова...

walik · #7 (**permalink**) 26.10.2011, 20:27

Сообщение от ksa

Давлю на кнопку (у меня Опера) - эфекта ноль.

Сообщение от ksa

В ФФ - ноль...

Возможно, тестил только в хроме)))

Сообщение от ksa

Да и тут
http://jquery-docs.ru/css/css/

Про такое '+=50px' нет ни слова...

Опять же - смотрим в официальной документации

Это означает что к текущему значению добавить еще 50 пикселей

ksa · #8 (**permalink**) 26.10.2011, 20:51

Сообщение от walik

Это означает что к текущему значению добавить еще 50 пикселей

Смысл-то я понял...

Но вот не работает только это там, где я пробовал...

Snipe · #9 (**permalink**) 27.10.2011, 08:28

<!DOCTYPE HTML>
<html>
  <head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
<div style="border:1px solid red">
<div id="a"></div>
</div>
<button onclick="a();">Click</a>
<script>
function a() {
  $('#a').css('marginBottom', '-10px');
  $('#a').css('paddingBottom', '10px');
}
</script>
<style>
#a {
  width: 200px;
  height: 90px;
  background-image: url(http://javascript.ru/forum/images/smilies/smile.gif);
  background-repeat: no-repeat;
  background-position: center center;
  /*border: 1px solid black;*/
}
</style>
  </body>
</html>

ksa · #10 (**permalink**) 27.10.2011, 08:54

Snipe, это не интересно... Ты просто установил другое значение, а не "сместил относительно центра".

<!DOCTYPE HTML>
<html>
  <head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
<div id="a"></div>
<button onclick="a();">Click</a>
<script>
function a() {
  $('#a').css('backgroundPosition', 'center 10px');
}
</script>
<style>
#a {
  width: 200px;
  height: 120px;
  background-image: url(http://javascript.ru/forum/images/smilies/smile.gif);
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid black;
}
</style>
  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript