Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2015, 21:35
Интересующийся
Отправить личное сообщение для AntiBuger Посмотреть профиль Найти все сообщения от AntiBuger
 
Регистрация: 16.05.2010
Сообщений: 27

Переключатель для слайдера с визуализацией обратного отсчета
Приветствую коллеги. Задался вопросом реализовать интересную вещь. Сделал слайдер, у сладера есть переключатели, и сладер по теймеру перелистывается. Вот хочу чтобы вокруг кнопки переключения слайдов отображался эффект времени. Не знаю как объяснить понятно))) представте несколько кружков рядом и вокруг текущего кружка прлисходит его "обводка" показывающая визуально через сколько покажется другой слайт. Вот думаю как бы это сделать. Если кто то понял и есть идеи, то буду рад услышать.
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2015, 22:01
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

AntiBuger,
хз о чем речь,но возможно имелось в виду,что то типа такого:
<!DOCTYPE HTML>
<html>
<head>
  <title>Document</title>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 15E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 17,
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;
 
function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = "rgb(0, 106, 229)";
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.font = '24px "Tahoma"';
    context.fillText((100 - a*100)|0, radius, drawY);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (timeStart = (new Date).getTime());
    timer = window.setTimeout(go, 50)
}
go();
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2015, 22:11
Интересующийся
Отправить личное сообщение для AntiBuger Посмотреть профиль Найти все сообщения от AntiBuger
 
Регистрация: 16.05.2010
Сообщений: 27

Спасибо друг. А по какому принципу это работает?
Ответить с цитированием
  #4 (permalink)  
Старый 10.06.2015, 22:19
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

AntiBuger,
по принципу canvas
П.с: Таймер отсчета в виде круга
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2015, 22:31
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

п.п.с:
http://www.jqueryscript.net/time-clo...Countdown.html
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2015, 22:32
Интересующийся
Отправить личное сообщение для AntiBuger Посмотреть профиль Найти все сообщения от AntiBuger
 
Регистрация: 16.05.2010
Сообщений: 27

Сообщение от Endy Посмотреть сообщение
AntiBuger,
по принципу canvas
П.с: Таймер отсчета в виде круга
Спасибо большое
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер обратного отсчета до события boypush Элементы интерфейса 17 04.05.2015 23:35
Как сделать несколько полей подсказок для слайдера DaniBeiss Events/DOM/Window 1 23.06.2012 16:49
Таймер для слайдера (jQuery) RamPi Events/DOM/Window 0 23.05.2011 14:52
Подскажите простое решение для слайдера Netherlandman Общие вопросы Javascript 10 13.11.2010 09:32
Написал часики для обратного отсчета. Подскажите где слажал t0xas Общие вопросы Javascript 14 26.09.2010 18:22