Javascript-форум - изменить положение бэкграунда относительно центра

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - изменить положение бэкграунда относительно центра (https://javascript.ru/forum/jquery/22606-izmenit-polozhenie-behkgraunda-otnositelno-centra.html)

optimismous

26.10.2011 13:41

изменить положение бэкграунда относительно центра

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

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

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

ksa	26.10.2011 14:33

Цитата:

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

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

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

Как вариант саму картинку сделать "кособокой"... :D Тогда при центрировании она будет смотреться смещёной относительно центра. ;)

walik

26.10.2011 14:52

Цитата:

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

Можно

<!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	26.10.2011 19:42

Цитата:

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

Можно

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

ksa	26.10.2011 19:44

В ФФ - ноль... :(

ksa	26.10.2011 19:49

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

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

walik

26.10.2011 20:27

Цитата:

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

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

Цитата:

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

В ФФ - ноль...

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

Цитата:

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

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

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

Опять же - смотрим в официальной документации :)
Это означает что к текущему значению добавить еще 50 пикселей

ksa	26.10.2011 20:51

Цитата:

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

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

Смысл-то я понял... :) Но вот не работает только это там, где я пробовал...

Snipe

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	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>

Snipe

27.10.2011 10:10

Цитата:

Сообщение от ksa (Сообщение 132994)

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

Да, тормознул.
Тогда, наверное, можно через хак. )
Поправил свой пример.

ksa	27.10.2011 13:57

Цитата:

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

Поправил свой пример.

Я нажал на нём "Посмотреть" и увидел целую страницу форума... :blink:

Snipe

27.10.2011 14:48

Цитата:

Сообщение от ksa (Сообщение 133045)

Я нажал на нём "Посмотреть" и увидел целую страницу форума... :blink:

Это, похоже, все примеры глючат.

ksa	27.10.2011 14:50

Цитата:

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

все примеры глючат

Да. Все примеры так делают...

Но по твоему коду ты двигаешь не бекграунд, как просил ТС... ;)

Snipe

27.10.2011 15:02

Цитата:

Сообщение от ksa (Сообщение 133065)

Да. Все примеры так делают...

Но по твоему коду ты двигаешь не бекграунд, как просил ТС... ;)

Визуально - да.
Но я ж говорю, что это хак. :)

Modder

17.11.2011 03:53

Можно конечно написать кроссбраузерный код с таким алгоритмом:

Считываем позицию background'а в нормальных браузерах так
```
xy = elem.css('backgroundPosition');
```
или в ИЕ так
```
x = elem.css('backgroundPositionX');
y = elem.css('backgroundPositionY');
```
В первом случае разбиваем строку "xy", которая имеет вид "0px 0px", на две по пробелу, и преобразуем в целые числа parseInt'ом.
Во втором случае сразу преобразуем в целые числа parseInt'ом.
```
x = parseInt(x);
y = parseInt(y);
```
Изменяем полученное значение на сколько надо и дописываем 'px'
```
x+=50;
y-=10;
xy = x+'px '+y+'px';
```
Устанавливаем новое значение
```
elem.css({backgroundPosition:xy});
```

Но это все сложно, что лучше обойтись позиционирование блока с фоновой картинкой :)

Pavel M.

17.11.2011 14:32

можно сдвигать так
в старых ie не будет работать

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-Ua-Compatible" content="IE=Edge"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>

  <style type='text/css'>
	#a {  
	  width: 150px;
	  height: 100px;
	  background: url(http://javascript.ru/forum/images/smilies/smile.gif) no-repeat center;
	  border: 1px solid;
	  padding: 0 0 10px;
	}

	#a:hover {
		background-origin: content-box;
	}
  </style>
</head>
<body>
	<div id="a">навести мышку</div>
</body>
</html>

к сожалению тег <meta http-equiv="X-Ua-Compatible" content="IE=Edge"/> не работает похоже в здесь в iframe
чтобы в IE9 и выше заработало надо отдельно запускать или ручками перевести IE9 в режим IE9

ksa	17.11.2011 14:50

Цитата:

Сообщение от Pavel M.

можно сдвигать так

А то, что паддинг тут вдруг появляется - это ничего? :)

Pavel M.

17.11.2011 14:56

Цитата:

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

А то, что паддинг тут вдруг появляется - это ничего?

я же просто возможный вариант сдвига показал, кому-то может и пригодится

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