Скрипты

timeloto-скрипт-моментальной-лотереи Оригинальный скрипт TimeLoto с качественным дизайном, тремя соц. системами для входа, встроено звуковое оповещение при выиграше. Выплаты на:...
vcity-браузерная-игра vCity - это браузерная онлайн-игра, которая разработана с помощью новейших веб-технологий. vCity - это многофункциональный игровой скрипт, который...
php-pro-bid-v7-8-магазин-аукцион PHP Pro Bid является первым продуктом на рынке, который включает всестороннюю поддержку как онлайн-аукционов, так и электронной коммерции. Если Вам...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Анимированный прогресс бар на JQuery

Анимированный прогресс бар на JQuery

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

HTML
 
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link href="/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="/css/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="/js/script.js"></script>

<title>Анимированный прогресс бар на JQuery</title>
</head>
<body>
    <div class="example">
   
        <div id="progress1">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>

        <hr />
        <div id="progress2">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>

        <hr />
        <div id="progress3">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
    </div>
</body>
</html>
CSS
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}

.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}

JavaScript
$(document).ready(function(){
    jQuery.fn.anim_progressbar = function (aOptions) {
        // Определяем значения
        var iCms = 1000;
        var iMms = 60 * iCms;
        var iHms = 3600 * iCms;
        var iDms = 24 * 3600 * iCms;

        // Определяем опции
        var aDefOpts = {
            start: new Date(), // Текущее время
            finish: new Date().setTime(new Date().getTime() + 60 * iCms), // Текущее время  + 60 сек
            interval: 100
        }
        var aOpts = jQuery.extend(aDefOpts, aOptions);
        var vPb = this;

        // Каждый индикатор прогресса
        return this.each(
            function() {
                var iDuration = aOpts.finish - aOpts.start;

                // Вызываем оригинальный индикатор прогресса
                $(vPb).children('.pbar').progressbar();

                // Процесс обработки
                var vInterval = setInterval(
                    function(){
                        var iLeftMs = aOpts.finish - new Date(); // Оставшееся время в миллисекундах
                        var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
                            iDays = parseInt(iLeftMs / iDms), // Прошло дней
                            iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // Прошло часов
                            iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // Прошло минут
                            iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // Прошло секунд
                            iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения

                        // Выводим текущее положение и прогресс
                        $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
                        $(vPb).children('.elapsed').html(iDays+' дн. '+iHours+'ч.:'+iMin+'мин.:'+iSec+'сек.</b>');
                        $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');

                        // В случае завершения
                        if (iPerc >= 100) {
                            clearInterval(vInterval);
                            $(vPb).children('.percent').html('<b>100%</b>');
                            $(vPb).children('.elapsed').html('Завершено');
                        }
                    } ,aOpts.interval
                );
            }
        );
    }

    // Режим по умолчанию
    $('#progress1').anim_progressbar();

    // Для секунд с 5-й по 15-ю
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
    var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});

    // Устанавливаем интервал обновления в 1 секунду
    $('#progress3').anim_progressbar({interval: 1000});
});

В первой части кода мы создаем новый плагин jQuery anim_progressbar, а во второй - приводим несколько примеров инициализации с различными параметрами. Конструктору передаются следующие параметры: start (время старта), finish (время финиша) и interval (интервал обновления индикатора). Так что вы можете устанавливать не только часы и минуты, но и дни.

На сайте trubkibondareva.ru Вы можете приобрести курительные трубки ручной работы которые изготавливаются из древовидного кустарника, растущего в лесах Среднеземноморья.



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...