Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Плавная смена картинок при наведении мыши на ссылк 
:(
    Опции темы
petyaeva
Дата 21.7.2010, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бесконечная карусель



Профиль
Группа: Участник
Сообщений: 25
Регистрация: 31.7.2009
Где: Орехово-Зуево

Репутация: нет
Всего: нет



Есть скрипт - вот он в примере смена картинок
При помощи этого скрипта я сделала меню - вверху список художников, под ним большая картина, которая меняется соответственно художнику, на которого наведена мышка. Но смена изображения происходит очень быстро и получается некрасиво. А можно ли добавить плавности? Или лучше использовать другой способ? (В яваскрипте я не сильна)
PM MAIL WWW   Вверх
CruorVult
Дата 21.7.2010, 16:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 3
Всего: 28



PM MAIL Skype   Вверх
Hanut
Дата 21.7.2010, 17:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 2.7.2010

Репутация: 1
Всего: 2



Не знаю, подойдет вам такой способ, или нет. Недостатком может быть то что он подгружает все картинки сразу, включая и невидимые. Посмотреть как работает смена картинок затуханием можно здесь http://norse.ru/pub/184.html
___________

Этот код надо вынести в отдельный .js файл, к примеру test.js. Редактировать в нем ничего не надо.

Код

var Timer_b, Timer_d;
var active;

function J_over(id) {
    if (id != active) {
        clearInterval(Timer_b);
        clearInterval(Timer_d);
        active = id;
        Timer_d = window.setInterval(J_dim, 50);
    }
}

function J_dim() {
    var img = document.getElementById('img_div');
    var opacity = Math.floor(parseFloat(img.style.opacity) * 100);
    if (opacity <= 0) {
        clearInterval(Timer_d);
        J_img();
    } else {
        img.style.opacity = opacity / 100 - 0.1;
        img.style.filter = "alpha(opacity=" + (opacity - 10) + ")";
    }
}

function J_img() {
    var i;
    var oImg = document.getElementById('img_div').getElementsByTagName('img');
    var count = oImg.length;
    if (count <= 1) return;
    clearInterval(Timer_b);
    clearInterval(Timer_d);
    for (i = 0; i < count; i++) {
        oImg[i].style.display = 'none';
    }
    document.getElementById(active).style.display = 'block';

    Timer_b = window.setInterval(J_bright, 50);
}

function J_bright() {
    var img = document.getElementById('img_div');
    var opacity = Math.floor(parseFloat(img.style.opacity) * 100);
    if (opacity >= 100) {
        clearInterval(Timer_b);
    } else {
        img.style.opacity = opacity / 100 + 0.1;
        img.style.filter = "alpha(opacity=" + (opacity + 10) + ")";
    }
}


Пример HTML разметки.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<!-- Ссылки при наведении на которые должны появляться картинки. -->
<div>
  <div><a href="" onmouseover="javascript:J_over('img_1');">img 1</a></div>
  <div><a href="" onmouseover="javascript:J_over('img_2');">img 2</a></div>
  <div><a href="" onmouseover="javascript:J_over('img_3');">img 3</a></div>
</div>
<!-- // -->

<!-- Все загружаемые картинки. -->
<div style="opacity: 1;" id="img_div">
  <img border="0" style="display: none;" id="img_1" alt="" src="/img/1-picture.jpg" />
  <img border="0" style="display: none;" id="img_2" alt="" src="/img/2-picture.jpg" />
  <img border="0" style="display: none;" id="img_3" alt="" src="/img/3-picture.jpg" />
</div>
<!-- // -->

<!-- Вывод первой картинки при загрузке страницы. -->
<script type="text/javascript">
J_over('img_1');
</script>
<!-- // -->

</body>
</html>


Необходимо соблюсти связь идентификаторов в теге img (id="img_1") и в вызове функции J_over('img_1'). Источник картинки (src="/img/1-picture.jpg") может иметь любой путь.

Это сообщение отредактировал(а) Hanut - 21.7.2010, 19:37
PM MAIL   Вверх
petyaeva
Дата 22.7.2010, 10:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бесконечная карусель



Профиль
Группа: Участник
Сообщений: 25
Регистрация: 31.7.2009
Где: Орехово-Зуево

Репутация: нет
Всего: нет



Hanut, большое человеческое спасибо!
К сожалению, нет возможности поставить плюсик - мало постов. Все получилось здорово. Сейчас мне кажется, немножко слишком быстро идет исчезание - смотрю на локале. Наверное, есть возможность менять скорость, но я как-то не уверена, стоит ли... А если попробовать еще замедлить процесс исчезания-появления - где это правится, в таймере 
Код

Timer_b = window.setInterval(J_bright, 50);
?
PM MAIL WWW   Вверх
petyaeva
Дата 22.7.2010, 19:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бесконечная карусель



Профиль
Группа: Участник
Сообщений: 25
Регистрация: 31.7.2009
Где: Орехово-Зуево

Репутация: нет
Всего: нет



А в Эксплорере-то плавности нет как нет! smile 
PM MAIL WWW   Вверх
Hanut
Дата 22.7.2010, 19:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 2.7.2010

Репутация: 1
Всего: 2



Цитата(petyaeva @ 22.7.2010,  19:10)
А в Эксплорере-то плавности нет как нет!

Извиняюсь за недосмотр. Это необъяснимая особенность IE; слой содержащий картинки должен иметь параметр абсолютного позиционирования. То есть, рабочий пример будет выглядеть так:

Код

<div style="opacity: 1; position: absolute;" id="img_div">
  <img border="0" style="display: none;" id="img_1" alt="" src="/img/1-picture.jpg" />
  <img border="0" style="display: none;" id="img_2" alt="" src="/img/2-picture.jpg" />
  <img border="0" style="display: none;" id="img_3" alt="" src="/img/3-picture.jpg" />
</div>


Как вариант, можно заменить position: absolute; на фиксированный размер width: 320px; height: 240px;, так тоже будет работать. Если у всех ваших картинок одинаковый размер, то проблем не будет, если размеры разные, то скрипт придется переделать немного.

На счет времени затухания, то оно устанавливается здесь:
Код

Timer_d = window.setInterval(J_dim, 50);

Таймер появления здесь:
Код

Timer_b = window.setInterval(J_bright, 50);


Попробуйте подобрать свои значения таймера, но при его увеличении вы заметите неприятную ступенчатость при смене прозрачности.
PM MAIL   Вверх
petyaeva
Дата 22.7.2010, 22:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бесконечная карусель



Профиль
Группа: Участник
Сообщений: 25
Регистрация: 31.7.2009
Где: Орехово-Зуево

Репутация: нет
Всего: нет



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

Это сообщение отредактировал(а) petyaeva - 23.7.2010, 09:11
PM MAIL WWW   Вверх
Hanut
Дата 23.7.2010, 17:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 2.7.2010

Репутация: 1
Всего: 2



Вложенность в другой div вроде никак не влияет. Хотя объяснить поведение фильтра Alpha достаточно сложно, с атрибутом opacity в IE все очень запутано и не документировано.

Документация здесь: MSDN.

Если будут какие-то трудности, то пишите, постараемся разобраться.
PM MAIL   Вверх
wiihau
  Дата 28.7.2010, 23:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 28.7.2010

Репутация: нет
Всего: нет



Привет!

А подскажите совсем зеленому в javascript человеку как на основе вышеприведенного сделать следующее:

У меня система видеонаблюдения при движении объекта посылает по фтп на сервер картинки с названием snapshot{N}, где N - порядковый номер идущий в бесконечность.

В приведенном примере все картинки изначально прописаны и задано имя первой в списке отображения. На своем сайте я хочу, чтобы первой отображалась картинка с последним номером (она же последняя созданная) и была возможность прокручивать назад и потом вперед. 

Если это сделать невозможно, то сошло бы и простое отображение последних десяти созданных картинок (фотографий).

Заранее спасибо за ответ и если возможно разжевать по строчкам как настоящему новичку. 


PM MAIL   Вверх
Hanut
Дата 28.7.2010, 23:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 2.7.2010

Репутация: 1
Всего: 2



wiihau, я помогу, если вы уточните:
1) Как именно выглядят файлы? Как snapshot33.jpg?
2) Допустим, вы выбрали из каталога последнюю картинку snapshot33.jpg, на какие картинки надо перелистывать? snapshot32.jpg, затем snapshot31.jpg и т. д.? То есть, номер предыдущей картинки будет меняться, как номер текущей минус один? Или они идут не последовательно?
3) Много картинок предполагается просматривать? Если больше десяти, то надо будет подгружать картинки динамически, при перелистывании, а не сразу все при загрузке страницы.
PM MAIL   Вверх
wiihau
Дата 30.7.2010, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 28.7.2010

Репутация: нет
Всего: нет



1) snapshot033.jpg
2) Изначально должна отображаться последняя загруженная фотография (соответвтенно с наибольшим индексом). При прокрутке вперед ничего не изменится, при прокрутке назад будет snapshot032. С него уже можно и назад по порядку и вперед.
3) Я понял засаду. Предполагается просматривать все картинки. Их может быть больше сотни. Поэтому видимо этот метод мне не подойдет. Вижу решение как изначально отображать последние 6 фотографий в таблие 2х3, а при переходе на страницу назад, отображать шесть фоток начиная с "последняя - 12". Как будет выглядеть код в этом случае? Или мне лучше создать отдельную тему?
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1066 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.