Форум

warobushek · #1 (**permalink**) 15.02.2011, 09:12

Хочу в спрайте с помощью jquery менять позицию бакграунда
почему-то не работает эта конструкция у меня.

как можно это сделать?

ksa · #2 (**permalink**) 15.02.2011, 09:14

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

как можно это сделать?

Как вариант сделать нужный стиль/класс в цсс и потом присвоить его элементу ДОМ...

warobushek · #3 (**permalink**) 15.02.2011, 09:32

Можно ли динамически создать класс тогда.

У меня в спрайте на данный момент 50 картинок.
Меняются они довольно часто, чтобы каждый раз править css файл.

Конечно это я могу сделать и на стороне сервера, но необходимая информация уже есть у клиента => неохото лишний раз напрягать сервак.

ksa · #4 (**permalink**) 15.02.2011, 11:30

warobushek, файл цсс готовится заранее. Потом только используется...

warobushek · #5 (**permalink**) 15.02.2011, 12:26

в моем случае два варианта либо на стороне сервера задавать смещение , либо динамически через javascript его задавать

Поэтому и прошу помощи у профессионалов.

CSS не подойдет. (хотя его тоже можно формировать на серваке, но это уже будет слишком ...)

ksa · #6 (**permalink**) 15.02.2011, 14:14

warobushek, х/з как там в jQuery... Но можно сделать и на старом, добром js вот так

<!DOCTYPE html>
<html>
<head>
<style>
div {
	width: 200px;
	height: 100px;
	border: 1px solid;
	background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat;
	background-position: 0 0;
}
</style>
<script>
function Go() {
	document.getElementById("box").style.backgroundPosition='right bottom'
}
</script>
</head>
<body>
<div id='box'></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

walik · #7 (**permalink**) 15.02.2011, 14:30

<html>
<head>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
div {
    width: 200px;
    height: 100px;
    border: 1px solid;
    background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat;
    background-position: 0 0;
}
</style>
<script>
function Go() {
	$("#box").css({backgroundPosition: '10px 20px'});
}
</script>
</head>
<body>
<div id='box'></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

Вот на JQuery

warobushek · #8 (**permalink**) 15.02.2011, 15:26

Спасибо Вам большое.
кстати попробовал еще раз
.css('background-position', '500px 0px');

все-таки работает, просто я не в тот момент вызывал

Форум

Справочник

Discord чат

Курсы javascript