Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #51 (permalink)  
Старый 31.01.2016, 21:53
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

DynkanMaclaud,
Единственное, что хотелось бы добавить:
Когда интервал не выделен.
Если кликнуть по одному и тому же элементу 2 раза -> снять зеленую метку = привести все в исходное состояние (по сути перезапустить функцию). Чтобы не было ни зеленых, ни красных, ни синих элементов.
И, таким образом, дать возможность снова начать выделение.

Другими словами, если начальная и конечная метки совпадают -> снять все метки либо перезапустить функцию.
Было бы здорово.

Последний раз редактировалось Teamur, 31.01.2016 в 22:02.
Ответить с цитированием
  #52 (permalink)  
Старый 31.01.2016, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

выделение с градиентом диапазона элементов по двум кликам и отменой-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. Причина: убрал лишнее
Ответить с цитированием
  #53 (permalink)  
Старый 01.02.2016, 00:13
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

рони,
Респект))) это сколько прогать на js надо чтобписать такой код))))

Последний раз редактировалось DynkanMaclaud, 01.02.2016 в 00:18.
Ответить с цитированием
  #54 (permalink)  
Старый 01.02.2016, 01:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

DynkanMaclaud,
Ответить с цитированием
  #55 (permalink)  
Старый 01.02.2016, 10:37
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Сообщение от Teamur Посмотреть сообщение
Первый клик - присваиваем переменной a номер, полученный предварительно при наведении.
Далее следуя за курсором, подсвечиваем элементы от a до текущего элемента, над которым находится курсор, постоянно обновляя переменную b
Сами пишите псевдокод, что мешает теперь это перевести в js?
Ответить с цитированием
  #56 (permalink)  
Старый 01.02.2016, 17:38
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

destus,
теперь уже ничего не мешает.
если у вас есть свой вариант решения задачи, пожалуйста представьте. Лишним ответ не будет точно. Чем больше решений, тем богаче полученный читателем опыт. Спасибо.
рони,
ну вы даете, супер!
DynkanMaclaud,
нам еще учиться и учиться!
особенно мне.

Последний раз редактировалось Teamur, 07.02.2019 в 08:36.
Ответить с цитированием
  #57 (permalink)  
Старый 01.02.2016, 18:25
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

рони,

А как же убрать выделение, если курсор вне контейнера?
(вариант с градиентом)
Ответить с цитированием
  #58 (permalink)  
Старый 01.02.2016, 18:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Teamur
А как же убрать выделение, если курсор вне контейнера?
ой даже ума не приложу
Ответить с цитированием
  #59 (permalink)  
Старый 01.02.2016, 18:46
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

рони,

Спасибо всем за помощь!
'Увидимся' в будущем... ->

Последний раз редактировалось Teamur, 07.02.2019 в 08:38.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jq выбор элементов межу двумя другими diakon Общие вопросы Javascript 9 10.09.2013 14:58