Эффект выдвижения в JavaScript

Javascript

Те, кто думаю, что красивые эффект можно создать только с помощью флэша, ошибаются. В данной статье я научу вас, как создавать эффект выдвижения фото при наведении курсора мыши.

Возможно, вы видели подобный эффект, сделанный во Flash. Но во-первых - Flash есть не у всех, во вторых - размер загружаемого Flash ролика несоизмерима по размерам с небольшим скриптом на JavaScript.

Пусть есть некоторое количество картинок (желательно квадратных для более красивого эффект выдвижения). Необходимо, что при наведении на одну из картинок она плавно увеличивалась в размерах, то есть создавалось ощущение, что она плавно выдвигается. Для придания изящности, необходимо также добавить тень небольшим картинкам, которая исчезает по мере увеличения изображения.

Следующий код позволяет продемонстрировать данный эффект:

HTML
Текст

  1. < style>

  3. .image { cursor: hand;
  4. border: 1px solid;
  5. FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength=30)}

  7. < /style>

  9. < script language=JavaScript>

  11. var pic = new Array("pic0", "pic1", "pic2", "pic3");
  12. var x = new Array(120,120,120,120,120);
  13. var y = new Array(120,120,120,120,120);
  14. var sh = new Array(30,30,30,30,30);
  15. var t = new Array();

  17. function tonext(a) {

  19. x[a]+=5;
  20. y[a]+=5;
  21. sh[a]-=2;
  22. document.getElementById(pic[a]).width=x[a];
  23. document.getElementById(pic[a]).height=y[a];
  24. document.getElementById(pic[a]).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength='

  26. +sh[a]+')';
  27. t[a] = setTimeout("tonext("+a+")",10);
  28. if (x[a]>=195) {
  29. document.getElementById(pic[a]).width=195;
  30. document.getElementById(pic[a]).height=195;
  31. clearTimeout(t[a]);
  32. }
  33. }

  35. function toback(a) {

  37. x[a]-=5;
  38. y[a]-=5;
  39. sh[a]+=2;
  40. document.getElementById(pic[a]).width=x[a];
  41. document.getElementById(pic[a]).height=y[a];
  42. document.getElementById(pic[a]).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength='

  44. +sh[a]+')';
  45. t[a] = setTimeout("toback("+a+")",10);
  46. if (x[a]< =120) {
  47. document.getElementById(pic[a]).width=120;
  48. document.getElementById(pic[a]).height=120;
  49. clearTimeout(t[a]);
  50. }
  51. }

  53. < /script>

  55. < body leftMargin=100 topMargin=80>
  56. < center>
  57. < table cellpadding=0 cellspacing=0>
  58. < tr valign=center>

  60. < td width=215 height=215 align=center>
  61. < img src=lemur.jpg width=120 height=120 class=image onmouseover='tonext(0)' onmouseout='toback(0)' name=pic0>
  62. < /td>

  64. < td width=215 height=215 align=center>
  65. < img src=flamingo.jpg width=120 height=120 class=image onmouseover='tonext(1)' onmouseout='toback(1)' name=pic1>
  66. < /td>

  68. < tr valign=center>
  69. < td width=215 height=215 align=center>
  70. < img src=dog.jpg width=120 height=120 class=image onmouseover='tonext(2)' onmouseout='toback(2)' name=pic2>
  71. < /td>

  73. < td width=215 height=215 align=center>
  74. < img src=leo.jpg width=120 height=120 class=image onmouseover='tonext(3)' onmouseout='toback(3)' name=pic3>
  75. < /td>

  77. < /tr>
  78. < /table>
  79. < /center>

На странице были размещены четыре картинки, оригинальный размер которых составляет 195x195, но которые отображаются как 120x120. При этом, картинки по умолчанию имеют теневой фильтр:

FILTER:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#666666,strength=30)

Параметр color позволяет задать цвет тени, direction - угол падения, strength - разброс тени.

При наведении указателя мыши на любую из картинок вызывается функция tonext(), а если картинка теряет указатель - toback().

Функции tonext() и toback() выполняют противоположные действия. Функция tonext() увеличивает отображаемый размер картинки и уменьшает тень:

HTML
Текст

  1. x[a]+=5;
  2. y[a]+=5;
  3. sh[a]-=2;

функция toback() наоборот, уменьшает изображение и увеличивает тень к прежнему состоянию:

HTML
Текст

  1. x[a]-=5;
  2. y[a]-=5;
  3. sh[a]+=2;

Обратите внимание, что в массиве pic должны хранится все имена картинок (pic1, pic2...) по порядку. Количество элементов в массивах x, y, sh должно быть не меньше, чем количество картинок, учавствующих в эффекте.


Оставить комментарий Comment RSS
Добавил: web-programming

Назад: Шесть генераций JavaScript: как это было
Далее: Текстовый информер валют на вашем сайте

Постоянные ссылки

При копировании ссылка на TeaM RSN обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Оставить комментарий

Вы должны войти, чтобы оставить комментарий.