Я делаю личный проект, в котором пользователь может настроить внешний вид автомобиля в Интернете.
Основа проста: 3 кнопки (Change Color - Change View - Lights On/Off) и следующее изображение спрайта:
Как вы можете видеть, пользователь может выбирать между 3 цветами, изменять вид и включать фары и габаритные огни.
Пока все хорошо, проблема заключается в том, чтобы сделать это реально выполнимо.
Ниже код, который у меня есть до сих пор:
$(document).ready(function(){
$("#color").click(function(){
$('#box').toggleClass('white-front-off');
});
$("#view").click(function(){
$('#box').toggleClass('red-back-off');
});
$("#lights").click(function(){
$('#box').toggleClass('red-front-on');
});
});
#box{
width: 113px;
height: 85px;
background-image: url(https://i.stack.imgur.com/WNsgN.jpg);
}
.red-front-off {
background-position: 0px 0px;
}
.red-back-off {
background-position: -226px 0px;
}
.red-front-on {
background-position: -113px 0px;
}
.red-back-on {
background-position: -339px 0px;
}
.white-front-off {
background-position: 0px -85px;
}
.white-back-off {
background-position: -226px -85px;
}
.white-front-on {
background-position: -113px -85px;
}
.white-back-on {
background-position: -339px -85px;
}
.black-front-off {
background-position: 0px -85px;
}
.black-back-off {
background-position: -226px -85px;
}
.black-front-on {
background-position: -113px -85px;
}
.black-back-on {
background-position: -339px -85px;
}
Я новичок в спрайтах и JQuery, поэтому сделал все возможное, что смог, при этом возникли проблемы:
Перечень проблем:
Я не знаю, как добавить значения в JQuery (представьте, что красный цвет равен 0, белый - 1, а черный - 2, я знаю, как переключаться между 0 и 1, но я не знаю, как достичь 2) В фрагменте кода вы видите, что я не вижу черный цвет. Если пользователь нажимает change color, а последний цвет (в данном случае черный) находится на экране, то как-то спрайт должен начинаться снова с красного цвета (это может быть возможно с повторением фона). Если пользователь нажимает Lights On/Off независимо от цвета или вида, свет должен включаться / выключаться в правильном положении.
Источник
Ответ
Я тоже ушел от классов. Код получился совсем другим. Убрал jquery, как по мне здесь можно без него обойтись. CSS совсем простой.
Стиль background-image вводится и меняется по нажатию кнопок посредством js
var verticalTiePoint = [0, -85, -170],
horizontalStep = -113,
i = 0,
j = 0,
horizontalTiePoint = 0,
box = document.getElementById('box'),
color = document.getElementById('color'),
view = document.getElementById('view'),
light = document.getElementById('lights');
color.onclick = changeColor;
view.onclick = changeView;
lights.onclick = switchLight;
function changeColor() {
if (i == 2) i = 0;
else i = i + 1;
box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i] + "px";
}
function changeView() {
if (j < 2) j += 2;
else j -= 2;
horizontalTiePoint = horizontalStep * j;
box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i] + "px";
}
function switchLight() {
if (j % 2 == 0) j += 1;
else j -= 1;
horizontalTiePoint = horizontalStep * j;
box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i] + "px";
}
#box {
width: 113px;
height: 85px;
background-image: url('https://i.stack.imgur.com/jCqQw.jpg');
}
Комментариев нет:
Отправить комментарий