01.08.2018, 14:34
|
 |
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
Dilettante_Pro,
в его примере, через "Посмотреть", так же. Не работают репиты и переключение px/cover. Изменения вступают в силу только после изменений позиции (лефт/топ). Cover работает, но тоже барахлит)
Последний раз редактировалось madeas, 01.08.2018 в 14:40.
|
|
01.08.2018, 14:46
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
А как такой вариант?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
label,
ul,
p {
margin-bottom: 0;
}
.back_flex ul li {
list-style: none;
display: inline-block;
}
.back_flex {
display: flex;
align-items: center;
margin: 15px 0;
}
.back_flex p {
margin-right: 15px;
}
#backpx {
width: 50px;
}
#back {
width: 267px;
height: 267px;
background-color: rgb(0, 0, 0);
display: flex;
position: relative;
}
</style>
</head>
<body>
<div class='container p-3'>
<div class='row align-items-center'>
<div class='col-lg-6'>
<div class='back_flex'>
<p>background-image:</p>
<ul>
<li>url(<input type='text' id='url' value="https://javascript.ru/cat/list/donkey.gif">);</li>
</ul>
</div>
<div class='back_flex'>
<p>background-repeat:</p>
<ul>
<li><label><input type='radio' name='repeat' id='' checked>no-repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-x</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-y</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-position: </p>
<ul>
<li>Left <label><input id='posX' type='number' min='0' max='100' value="0">%</label></li>
<li>Top <label><input id='posY' type='number' min='0' max='100' value="0">%</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-size: </p>
<ul>
<li><label><input type='number' id='size' value="30">px</label></li>
<li><label><input type='checkbox' id='size2' name='size'>cover</label></li>
</ul>
</div>
</div>
<div class='col-lg-6'>
<div id='back'></div>
</div>
</div>
</div>
<script>
var back = document.querySelector("#back"),
x = document.querySelector("#posX"),
y = document.querySelector('#posY'),
size = document.querySelector('#size'),
size2 = document.querySelector('#size2');
function style() {
back.style.background = `url(${document.querySelector("#url").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
back.style.backgroundSize = size2.checked?'cover':size.value+'px';
};
style();
[].forEach.call(document.querySelectorAll('input'), function(el) { el.onchange=style});
[].forEach.call(document.querySelectorAll('input'), function(el) { el.oninput=style});
</script>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 01.08.2018 в 16:10.
|
|
01.08.2018, 15:00
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
Dilettante_Pro,
https://my-files.ru/dko70m пришлось на телефон снимать))
|
|
01.08.2018, 15:10
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
madeas,
Посмотрел. Очень странно. У меня нормально работает - на все параметры сразу реагирует.
Значит, дело не в стрелочных функциях...
|
|
01.08.2018, 15:24
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
madeas,
Изменил назначение обработчика в пост 12. Посмотрите.
|
|
01.08.2018, 15:36
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
Dilettante_Pro,
не, ничего не поменялось. Это видимо браузер. Нормально работает лефт/топ и позиция через поле. Радио и чеки нет.
Кстати, а как сделать чтобы появилась кнопка "просмотреть" ?)
|
|
01.08.2018, 15:49
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
madeas, скорее всего событие "input" не срабатывает на радио-баттонах.
Про форматирование на форуме: http://javascript.ru/formatting
Последний раз редактировалось Nexus, 01.08.2018 в 15:51.
|
|
01.08.2018, 16:12
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от Nexus
|
|
скорее всего событие "input" не срабатывает на радио-баттонах.
|
Назначил два обработчика в пост 12.
Если только change - не очень динамично работает |
|
01.08.2018, 16:16
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
Dilettante_Pro, а почему не так?
[].forEach.call(document.querySelectorAll('input'), function(el) {
el.addEventListener(el.type === 'text' ? 'input' : 'change', style);
});
|
|
01.08.2018, 16:19
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Nexus,
Методом копипасте, по-быстрому  - для посмотреть
Сначала input поменял на change - не очень понравилось, добавил второй 
Последний раз редактировалось Dilettante_Pro, 01.08.2018 в 16:22.
|
|
|
|
