DynkanMaclaud,
Единственное, что хотелось бы добавить: Когда интервал не выделен. Если кликнуть по одному и тому же элементу 2 раза -> снять зеленую метку = привести все в исходное состояние (по сути перезапустить функцию). Чтобы не было ни зеленых, ни красных, ни синих элементов. И, таким образом, дать возможность снова начать выделение. Другими словами, если начальная и конечная метки совпадают -> снять все метки либо перезапустить функцию. Было бы здорово. |
выделение с градиентом диапазона элементов по двум кликам и отменой-2 раза по первому
Teamur,
:lol: градиент так градиент :cray: <!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> |
рони,
Респект))) это сколько прогать на js надо чтобписать такой код)))) |
DynkanMaclaud,
:thanks: |
Цитата:
|
destus,
теперь уже ничего не мешает. если у вас есть свой вариант решения задачи, пожалуйста представьте. Лишним ответ не будет точно. Чем больше решений, тем богаче полученный читателем опыт. Спасибо. :write: :lol: рони, ну вы даете, супер! DynkanMaclaud, нам еще учиться и учиться! :yes: особенно мне. |
рони,
:) А как же убрать выделение, если курсор вне контейнера? (вариант с градиентом) |
Цитата:
|
рони,
:lol: Спасибо всем за помощь! 'Увидимся' в будущем... -> |
Часовой пояс GMT +3, время: 12:56. |