31.01.2016, 21:53
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
DynkanMaclaud,
Единственное, что хотелось бы добавить:
Когда интервал не выделен.
Если кликнуть по одному и тому же элементу 2 раза -> снять зеленую метку = привести все в исходное состояние (по сути перезапустить функцию). Чтобы не было ни зеленых, ни красных, ни синих элементов.
И, таким образом, дать возможность снова начать выделение.
Другими словами, если начальная и конечная метки совпадают -> снять все метки либо перезапустить функцию.
Было бы здорово.
Последний раз редактировалось Teamur, 31.01.2016 в 22:02.
|
|
31.01.2016, 23:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
выделение с градиентом диапазона элементов по двум кликам и отменой-2 раза по первому
Teamur,
 градиент так градиент 
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#box{
padding:50px;
background:#228B22;
position:relative;
text-align:center;
}
.el{
border-radius:4px;
display:inline-block;
font-size:20px;
margin:3px;
padding:3px;
background:#FFF;
transition:all .2s ease-in-out;
cursor:pointer;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function d(a, e) {
for (var b = e ? [255, 0, 255, .8] : [255, 255, 255, 1], f = e ? [184, 219, 255, 1] : b, d = a.length, g = 0; g < d; g++) {
for (var h = [], l = b.length, c = 0; c < l; c++) h[c] = g / (d - 1) * (f[c] - b[c]) + b[c], 3 > c && (h[c] = Math.round(h[c]));
!g && (h = b);
a[g].style.backgroundColor = "rgba(" + h + ")"
}
return a
}
var f = [].slice.call(document.querySelectorAll(".el")),
a = void 0;
f.forEach(function(k, e) {
k.addEventListener("mouseover", function() {
if (void 0 !== a) {
var b = Math.min(e, a),
k = Math.max(e, a);
d(f);
b = f.slice(b, k + 1);
a > e && b.reverse();
d(b, !0)
}
});
k.addEventListener("click", function() {
void 0 === a ? (a = e, d(f), d([f[a]], !0)) : a === e ? (d(f), a = void 0) : a = void 0
})
})
});
</script>
</head>
<body>
<div id='box'>
<div class="el">01</div>
<div class="el">02</div>
<div class="el">03</div>
<div class="el">04</div>
<div class="el">05</div>
<div class="el">06</div>
<div class="el">07</div>
<div class="el">08</div>
<div class="el">09</div>
<div class="el">10</div>
<div class="el">11</div>
<div class="el">12</div>
<div class="el">13</div>
<div class="el">14</div>
<div class="el">15</div>
<div class="el">16</div>
<div class="el">17</div>
<div class="el">18</div>
<div class="el">19</div>
<div class="el">20</div>
<div class="el">21</div>
<div class="el">22</div>
<div class="el">23</div>
<div class="el">24</div>
<div class="el">25</div>
<div class="el">26</div>
<div class="el">27</div>
<div class="el">28</div>
<div class="el">29</div>
<div class="el">30</div>
<div class="el">31</div>
<div class="el">32</div>
<div class="el">33</div>
<div class="el">34</div>
<div class="el">35</div>
<div class="el">36</div>
<div class="el">37</div>
<div class="el">38</div>
<div class="el">39</div>
<div class="el">40</div>
<div class="el">41</div>
<div class="el">42</div>
<div class="el">43</div>
<div class="el">44</div>
<div class="el">45</div>
</div>
</body>
</html>
Последний раз редактировалось рони, 01.02.2016 в 01:38.
Причина: убрал лишнее
|
|
01.02.2016, 00:13
|
 |
Профессор
|
|
Регистрация: 08.08.2014
Сообщений: 261
|
|
|
рони,
Респект))) это сколько прогать на js надо чтобписать такой код))))
Последний раз редактировалось DynkanMaclaud, 01.02.2016 в 00:18.
|
|
01.02.2016, 01:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
DynkanMaclaud,
|
|
01.02.2016, 10:37
|
 |
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
Сообщение от Teamur
|
Первый клик - присваиваем переменной a номер, полученный предварительно при наведении.
Далее следуя за курсором, подсвечиваем элементы от a до текущего элемента, над которым находится курсор, постоянно обновляя переменную b
|
Сами пишите псевдокод, что мешает теперь это перевести в js?  |
|
01.02.2016, 17:38
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
destus,
теперь уже ничего не мешает.
если у вас есть свой вариант решения задачи, пожалуйста представьте. Лишним ответ не будет точно. Чем больше решений, тем богаче полученный читателем опыт. Спасибо.
 рони,
ну вы даете, супер!
DynkanMaclaud,
нам еще учиться и учиться! 
особенно мне.
Последний раз редактировалось Teamur, 07.02.2019 в 08:36.
|
|
01.02.2016, 18:25
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
рони,
А как же убрать выделение, если курсор вне контейнера?
(вариант с градиентом)
|
|
01.02.2016, 18:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Сообщение от Teamur
|
|
А как же убрать выделение, если курсор вне контейнера?
|
ой даже ума не приложу |
|
01.02.2016, 18:46
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
рони,
Спасибо всем за помощь!
'Увидимся' в будущем... ->
Последний раз редактировалось Teamur, 07.02.2019 в 08:38.
|
|
|
|
