Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 31.08.2018, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от NeonMan
перескакивают через 2-3 значения,
строка 42 и 45
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
      counter-reset: num 2000;
      display: flex;
      width: 500px;
  }

  [name="line"]{
      display: none;
  }

  label:before{
      counter-increment: num ;
      content:  counter(num);
      display: block;
      width: 100px;
      height: 4px;
      background-color: rgba(255, 0, 255, 1);
       line-height: 30px;
  }
  [name="line"]:checked ~ label:before{
     background-color: rgba(240, 248, 255, 1);
  }
   label:nth-of-type(5):before{
       width: 0px;
  }
  [name="line"]:checked + label:after{
      margin-top: -6px;
      content:'';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 0, 255, 1);
  }
   label:nth-of-type(2):before{
       counter-increment: num 5 ;
  }
  label:nth-of-type(5):before{
       counter-increment: num 2 ;
  }
</style>

</head>

<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1"></label>
<input name="line" type="radio" id="line2" ><label for="line2"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3"></label>
<input name="line" type="radio" id="line4" ><label for="line4"></label>
<input name="line" type="radio" id="line5" ><label for="line5"></label>

</div>

</body>
</html>
Ответить с цитированием
  #22 (permalink)  
Старый 31.08.2018, 19:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от NeonMan
можно как-то при таком способе прописать вручную года?
атрибут data-year
css строка 18
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
      display: flex;
      width: 500px;
  }

  [name="line"]{
      display: none;
  }

  label:before{
      content:  attr(data-year);
      display: block;
      width: 100px;
      height: 4px;
      background-color: rgba(255, 0, 255, 1);
       line-height: 30px;
  }
  [name="line"]:checked ~ label:before{
     background-color: rgba(240, 248, 255, 1);
  }
   label:nth-of-type(5):before{
       width: 0px;
  }
  [name="line"]:checked + label:after{
      margin-top: -6px;
      content:'';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 0, 255, 1);
  }

</style>

</head>

<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1" data-year="100"></label>
<input name="line" type="radio" id="line2" ><label for="line2" data-year="109"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3" data-year=700></label>
<input name="line" type="radio" id="line4" ><label for="line4" data-year="1"></label>
<input name="line" type="radio" id="line5" ><label for="line5" data-year="3"></label>

</div>

</body>
</html>
Ответить с цитированием
  #23 (permalink)  
Старый 31.08.2018, 19:29
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

атрибут data-значение удобная штука, раньше не знал о нем
Ответить с цитированием
  #24 (permalink)  
Старый 31.08.2018, 19:41
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

а здесь transition или animate jQuery можно добавить, что бы было ощущение что он едет, а не резко добавляется
Ответить с цитированием
  #25 (permalink)  
Старый 31.08.2018, 20:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от NeonMan
а здесь transition
можно но лучше это сделает специалист по css
в jQuery UI есть слайдер, есть кучи других слайдеров.
Ответить с цитированием
  #26 (permalink)  
Старый 31.08.2018, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

NeonMan,
slider зависимый ползунок + создание шкалы
Ответить с цитированием
  #27 (permalink)  
Старый 31.08.2018, 22:25
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Да на самом деле этого способа с инпутами вполне достаточно, только анимировать бы и всё, а так отличный вариант

Последний раз редактировалось NeonMan, 31.08.2018 в 22:31.
Ответить с цитированием
  #28 (permalink)  
Старый 31.08.2018, 22:27
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

вот тут есть раздел анимации, Вы как думаете, это анимация всего графика или можно анимировать на нем объект?
http://www.chartjs.org/docs/latest/c...nimations.html
Ответить с цитированием
  #29 (permalink)  
Старый 31.08.2018, 22:32
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

есть ли разница между function() и function(event) jQuery

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

Сообщение от NeonMan
function()
это не будет работать в Firefox, если далее будет нужен event
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно обойти блокировку всплывающих окон? azazello Общие вопросы Javascript 12 20.07.2015 10:18
Как обойти блокировку вспливаючих окон в браузерах? SonicDX Оффтопик 6 09.04.2011 16:16
Как обойти overflow-x в IE6 AlexMak (X)HTML/CSS 2 26.11.2010 14:52
Ошибка в FF, как обойти? Jekel AJAX и COMET 0 17.10.2010 02:49
Масштабирование браузером - как обойти? Sandr Internet Explorer 7 25.04.2009 01:44