Как создать timeline для сайта

299

07 июня 2017, 05:18

Всем привет, вопрос следующего характера. По дизайну на сайте должно быть что то вроде часов времени работы автосервиса, вообще пока нет идеи как это делать, по задумке должна быть привязка к московскому времени и автомобиль с точкой и временем должен перемещаться по линии циклично каждый день. Может есть кто уже делал подобное?

Answer 1

Если требуется только показать при открытии страницы можете взять за основу прогресс-бары с UI jQuery. Тут уж фантазия и только. Если хотите анимацию, то добавьте немного js/jquery(данные через ajax подхватывайте)

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#tabs
{
font-size:0.7em;
height:500px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
   $("#tabs").tabs();
   $("#pbar1").progressbar({value:50});
   $("#but1,#but2,#but3").button();
   $("#but1").click(function(){ $("#pbar1").progressbar("value", $("#pbar1").progressbar("value")+10)});
   $("#but2").click(function(){ $("#pbar1").progressbar("value", $("#pbar1").progressbar("value")-10)});
   $("#but3").click(function(){alert($("#pbar1").progressbar("value"));});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Пример</a></li>
</ul>
<div id="tabs-1">
<div id="pbar1"></div>
<br /><br />
<button id="but1">+10%</button>
<button id="but2">-10%</button>
<button id="but3">Сейчас</button>
</div>
</body>
</html>

Данные пользователь получать может при открытии страницы

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает переход по URL вида 'page-'

Здравствуйте! Не работает URL для перехода по страницамСама пагинация рабочая, но почему-то URL вида "page-" не воспринимается базой данных

293

PHP

Angular и модульный backend

Буквально пару дней изучаю angular, вроде все логично, но задался вопросом - а как собственно это использовать совместно с backend частью ? К примеру...

285

PHP

Как отобразить меню компонента Joomla на всех view

Пишу для себя компонент Joomla с названием YpayФайловая структура как на скриншоте https://i

300

PHP

php usort сортировка по алфавиту

Есть такой код

401