Страницы

Поиск по вопросам

среда, 12 декабря 2018 г.

Sprite Image, как конфигуратор автомобиля

Я делаю личный проект, в котором пользователь может настроить внешний вид автомобиля в Интернете. Основа проста: 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'); } ColorCars


Комментариев нет:

Отправить комментарий