Вот было дело, с месяц назад, делал сайт-страничку.
Дизайнер постарался, полет фантазии. Красота.
А мне вдруго тоже захотелось добавить "жизни" в этот сайт.
Т.к. сайт посвящен лампочкам, идея пришла сама собой.
Решил сделать эффект похожий на то, как загорается люминесцентная лампа.
Долго ковырял амплитуды и частоты. Искал готовые примеры, но все это было не то.
Я обратился за помощью в интересной задаче к пользователю DITA.
Ему тоже стало интересно. Вот собственно он то и предложил интересный выход из положения. Никаких вам амплитуд и частот не нужно, все делается с помощью двух таймаутов. И это смотрится гораздо лучше чем отработка по формулам, да и ресурсов жрет там мало, что и не заметно.
Вот тут живой пример: http://xenonru[dot]ru/
Правда он обвязан еще доп. ф-ционалом.
Практически все картинки кликабельны.
Я оформил его в виде jquery-плагина:
CODE ( javascript):
скопировать код в буфер обмена
(function($) { $.fn.zap = function(params) { var rand = function(min, max) { return Math.floor( Math.random() * (max - min + 1) ) + min; }; var zapper = function(target) { target.zapCallback(1); if(isNaN(params.count) || params.count < 1) { return; } setTimeout(function() { zapper(target); params.count--; }, rand(100, 120)); setTimeout(function() { target.zapCallback(0); }, 160); }; if (typeof params == "undefined") { params = {}; } params.count = parseInt(params.count) || rand(3, 4); if (typeof params.callback == "undefined") { return alert("Zap-effect expects callback!"); } $.fn.zapCallback = params.callback; this.each(function() { zapper($(this)); }); }; })(jQuery);
Использовать, например, так:
Как видно из примера, callback-toggler получает 2 состояния, 1 и 0, и по ним можно делать все что вашей душе угодно. Callback выполняется N раз, как бы без вашего ведома. Если объяснять поведение плагина на примере включающейся лампочки, то она сперва мигает, а затем загорается и остается зажженной.
Параметр всего один: Кол-во "миганий".
Ранее был и второй параметр - скорость мигания, но я его убрал.
Как оно вам?(Отредактировано автором: 28 Октября, 2012 - 14:48:21)
|