изменить положение бэкграунда относительно центра
Здравствуйте все. Имеется див с таким стилем:
div.bg {
background-position: center top;
}
Подскажите, пожалуйста, можно ли с помощью jquery сместить его текущую позицию по горизонтали на заданное количество пикселей? |
Цитата:
Как вариант саму картинку сделать "кособокой"... :D Тогда при центрировании она будет смотреться смещёной относительно центра. ;) |
Цитата:
<!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>
|
Цитата:
|
В ФФ - ноль... :(
|
|
Цитата:
Цитата:
Цитата:
Это означает что к текущему значению добавить еще 50 пикселей |
Цитата:
|
<!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>
|
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>
|
| Часовой пояс GMT +3, время: 04:12. |