Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Плавная смена картинок при наведении мыши на ссылк

Автор: petyaeva 21.7.2010, 15:36

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

Автор: CruorVult 21.7.2010, 16:53

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

Автор: Hanut 21.7.2010, 17:43

Не знаю, подойдет вам такой способ, или нет. Недостатком может быть то что он подгружает все картинки сразу, включая и невидимые. Посмотреть как работает смена картинок затуханием можно здесь 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") может иметь любой путь.

Автор: 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

Цитата(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

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

Автор: Hanut 23.7.2010, 17:37

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

Документация здесь: http://msdn.microsoft.com/en-us/library/ms532967(v=VS.85).aspx.

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

Автор: wiihau 28.7.2010, 23:04

Привет!

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

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

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

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

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

Автор: Hanut 28.7.2010, 23:28

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

Автор: wiihau 30.7.2010, 15:38

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