VPF::Плавная смена картинок при наведении мыши на ссылк

petyaeva

Дата 21.7.2010, 15:36 (ссылка)

(нет голосов)

Загрузка ...

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

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

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

Есть скрипт - вот он в примере смена картинок
При помощи этого скрипта я сделала меню - вверху список художников, под ним большая картина, которая меняется соответственно художнику, на которого наведена мышка. Но смена изображения происходит очень быстро и получается некрасиво. А можно ли добавить плавности? Или лучше использовать другой способ? (В яваскрипте я не сильна)

CruorVult

Дата 21.7.2010, 16:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

http://docs.jquery.com/UI/Effects/Slide

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

petyaeva

Дата 22.7.2010, 10:21 (ссылка)

(нет голосов)

Загрузка ...

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

Код


Timer_b = window.setInterval(J_bright, 50);

petyaeva

Дата 22.7.2010, 19:10 (ссылка)

(нет голосов)

Загрузка ...

А в Эксплорере-то плавности нет как нет! smile

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);

Попробуйте подобрать свои значения таймера, но при его увеличении вы заметите неприятную ступенчатость при смене прозрачности.

petyaeva

Дата 22.7.2010, 22:50 (ссылка)

(нет голосов)

Загрузка ...

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

Это сообщение отредактировал(а) petyaeva - 23.7.2010, 09:11

Hanut

Дата 23.7.2010, 17:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

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

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

Если будут какие-то трудности, то пишите, постараемся разобраться.

wiihau

Дата 28.7.2010, 23:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Привет!

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

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

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

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

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

Hanut

Дата 28.7.2010, 23:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

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

wiihau

Дата 30.7.2010, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »