31.08.2018, 19:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от 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>
|
|
31.08.2018, 19:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от 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>
|
|
31.08.2018, 19:29
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 22.07.2018
Сообщений: 123
|
|
|
атрибут data-значение удобная штука, раньше не знал о нем
|
|
31.08.2018, 19:41
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.07.2018
Сообщений: 123
|
|
|
а здесь transition или animate jQuery можно добавить, что бы было ощущение что он едет, а не резко добавляется
|
|
31.08.2018, 20:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от NeonMan
|
|
а здесь transition
|
можно но лучше это сделает специалист по css
в jQuery UI есть слайдер, есть кучи других слайдеров. |
|
31.08.2018, 21:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
|
|
31.08.2018, 22:25
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.07.2018
Сообщений: 123
|
|
|
Да на самом деле этого способа с инпутами вполне достаточно, только анимировать бы и всё, а так отличный вариант
Последний раз редактировалось NeonMan, 31.08.2018 в 22:31.
|
|
31.08.2018, 22:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.07.2018
Сообщений: 123
|
|
|
есть ли разница между function() и function(event) jQuery
Последний раз редактировалось NeonMan, 31.08.2018 в 23:20.
|
|
31.08.2018, 22:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от NeonMan
|
|
function()
|
это не будет работать в Firefox, если далее будет нужен event |
|
|
|
