Сделайте свой собственный график для веб-сайта

Question

Я дизайнер, но я также занимаюсь программированием (javascript, html, css). Мне нужно создать пользовательскую временную шкалу для веб-сайта (не удалось опубликовать фотографию из-за недостаточной репутации здесь, но вот ссылка на дизайн: http://postimg.org/image/5p92wkk8f/ Как вы наведите указатель мыши на часть временной шкалы, и в соответствии с этим летних изменений) Но я не знаю, с чего начать. (Я попытался найти его в Интернете, но нет примеров кода временной шкалы, и я не хочу создавать временную шкалу с других сайтов, я хочу сделать обычную, которая будет именно такой, как этот проект). Кто-нибудь сможет дать мне подсказки, сказать что-нибудь полезное, скажите, с чего начать? Благодаря!

Answer 1

Timeline JS может быть именно то, что вы ищете. Как инструмент с открытым исходным кодом, вы можете изменить его в соответствии с вашими потребностями.

Answer 2

Я бы сделал много разделов, по одному для каждой части (год в этом случае) временной шкалы. Таким образом, будет около 20 div, которые вместе образуют всю белую линию.

CSS будет что-то вроде:

.timeline { /*"timeline" is a class name that I made up.*/ 
    background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/ 
    height: 30px; /*estimation*/ 
    width: 30px; /*estimation*/ 
    position:absolute; 
} 


.timeline:hover { 
    background-color:#000000; /* This is black color, change it to the brownish background color.*/ 
} 

Это только часть CSS. Вам нужно будет расположить каждое подразделение с полями. С выполненным CSS-кодом у вас будет изменение временной шкалы, это цвет для каждого div, на который вы наводите курсор.

Более сложная часть фактически меняет текст, и для этого мы будем использовать javascript. Чтобы сделать код не слишком длинным (и мне легче писать), я напишу его, как если бы на шкале времени было всего 2 раздела. Получив то, что я делаю, вы сможете легко его закончить.

Прежде всего, добавьте идентификатор в раздел, в котором находится текст, например «текст». В html добавьте к 2 разделам временной шкалы событие onmouseover, затем функцию. Функции пронумерованы.

<div id="text">Here is some text</div> 
<div class="timeline" onmouseover="changeText1()"></div> 
<div class="timeline" onmouseover="changeText2()"></div> 

Теперь нам нужно написать функции. Мы создадим переменную, которая будет содержать весь «текстовый» идентификатор, затем сделайте 2 функции (по одному для каждого div) и сделайте каждую функцию, изменяя текст в соответствии с номером функции.

var text_div=document.getElementById("text"); 
function changeText1() 
{ 
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline. 
} 
function changeText2() 
{ 
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline. 
} 

Итак, давайте рассмотрим. CSS изменяет цвет разделения при зависании. Кроме того, когда разворачивается временная шкала, она вызывает функцию из javascript-кода, которая изменит текст, в соответствии с которым наведено разделение.

Еще одна вещь, которую вы должны заметить: в добавленном изображении нет только одного абзаца, для каждого абзаца - другой код CSS. Код javascript, который я написал, изменит весь «текстовый» раздел, сделав его CSS влияющим на весь текст, введенный в javascript (часть «Некоторые тексты»). Если вы хотите, чтобы CSS оставался другим, вы должны:

1. сделать для каждого абзаца свой собственный идентификатор (в html).

2. затем введите новую переменную в javascript для каждого идентификатора.

3. , а затем добавить новую строку к каждой функции, которая изменит внутренний HTML нового абзаца отдельно.

Если что-то неясно, обратитесь к нам.