Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2012, 18:12
Кандидат Javascript-наук
Отправить личное сообщение для OklickSpb Посмотреть профиль Найти все сообщения от OklickSpb
 
Регистрация: 17.02.2012
Сообщений: 130

Анимация при загрузке файла.
Ребят, как реализовать такую штуку, как анимированное изображение, типо каких нибудь точечек и т.д., которое появлется, пока загружался файла на сервер? Или если это возможно, то еще и что бы проценты показывало), желательно только JavaScript.
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2012, 02:27
Кандидат Javascript-наук
Отправить личное сообщение для OklickSpb Посмотреть профиль Найти все сообщения от OklickSpb
 
Регистрация: 17.02.2012
Сообщений: 130

Неужеди никто не знает?
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2012, 08:59
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от OklickSpb Посмотреть сообщение
Неужеди никто не знает?
можно хоть кота поставить, что выше.

показывать процент загрузки - это только, вроде как, дополнительно на php.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2012, 13:47
Кандидат Javascript-наук
Отправить личное сообщение для OklickSpb Посмотреть профиль Найти все сообщения от OklickSpb
 
Регистрация: 17.02.2012
Сообщений: 130

А просто анимацию?
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2013, 11:44
Новичок на форуме
Отправить личное сообщение для fanks Посмотреть профиль Найти все сообщения от fanks
 
Регистрация: 21.02.2011
Сообщений: 6

<!DOCTYPE html>
<html>
<head>
<title>opacity</title>
<meta charset="utf-8">
<style>
#wrap {
width: 500px;
height: 400px;
outline: 1px solid #ccc;
margin: 0 auto;
padding-top: 100px;
text-align: center;
}

#load1, #load2, #load3, #load4, #load5, #load6, #load {
width: 15px;
height: 10px;
background-color: #ccc;
float: left;
margin-right: 3px;
opacity: 0.30;
}

.clear {
clear: both;
}

#container {
width: 80px;
border: 0px solid #EEE9E9;
/*background-color: #f6f6f6;*/
margin: 0 auto;
padding:0;
overflow: hidden;
display: none;
}
</style>
<script>
// Блоки #load[n] поочерёдно увеличивают и уменьшают прозрачность
var showBlock = 0.2; //Исходное значение прозрачного блока
var hideBlock = 1; //Исходное значение непрозрачного блока
var flag = 0; //для проверки, если блок полностью непрозрачный, то увел-ем прозрачность
var obj; //Текущий объект
var i = 0;
var t; //Таймер
var arr = ['load','load1','load2','load3','load4','load5','lo ad6'];

function showLoad() {
//alert(1);


if (flag == 0) {
//showBlock += 0.13;
showBlock += 0.07;
obj.style.opacity = showBlock;
if (showBlock < 1) {
t = setTimeout(showLoad, 8);
} else {
hideBlock = 1;
showBlock = 0.2;
flag = 1;
}
}
if (flag == 1) {
//hideBlock -= 0.05;
hideBlock -= 0.05;
obj.style.opacity = hideBlock;
if (hideBlock > 0.2) {
t = setTimeout(showLoad, 8);
} else {
//obj.style.opacity = '';
//После того как показали и скрыли один блок
//обнуляем всё что можно и завершаем фунукцию
hideBlock = 1;
showBlock = 0.2;
obj = undefined;
flag = 0;
t = undefined;
return true;
}
}
//hideLoad();
}

function init() {
///alert(arr[i]);
//если нет таймера запускаем функцию ещё раз
if (!t) {
obj = document.getElementById(arr[i]);
showLoad();
setTimeout(init, 450);
i ++;
//obj.style.marginLeft = w + 'px';
if ( i == 4) { //
i = 0;
w = 0;
}
}
}

function start() {
document.getElementById('container').style.display = 'block';
init();
}

</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="load"></div>
<div id="load1"></div>
<div id="load2"></div>
<div id="load3"></div>
<!--
<div id="load4"></div>
<div id="load5"></div>
<div id="load6"></div>
-->
</div>
<div class="clear"></div>
</div>

<input type="button" onclick="document.getElementById('container').styl e.display = 'block'; init()" value="Start">
</body>
</html>

Велосипед, подобие анимации!
Думаю можно это сохранить в файл и запустить, ещё добавить кроссбр-ть, opacity в ИЕ неработает, в Мозиле норм. (-;

Последний раз редактировалось fanks, 11.04.2013 в 12:14.
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2013, 12:07
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

вау, это даже работает http://codepen.io/anon/pen/cpohn
столько кода для анимации... чем вам картинки не удружили?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автозапуск скрипта при загрузке страницы HepoH Javascript под браузер 3 31.03.2012 22:27
При загрузке страницы не отображается картинка pimax1978 Opera, Safari и др. 10 06.01.2012 23:09
Вызов вункции при изменении экрана и при загрузке страницы frost18 Общие вопросы Javascript 2 31.08.2011 22:28
установить переменную сессии через ajax при загрузке страницы optik77 AJAX и COMET 3 02.06.2011 17:36
Увеличение окна браузера при загрузке Grendel Events/DOM/Window 11 13.05.2011 01:40