Блог

Такие скрипты часто используются на разных каналах (видеохостингах). Когда пользователь наводит курсор мыши на миниатюру скриншота, этот скриншот заменяется следующим и так далее. Когда мышь выходит, там появляется первое изображение. Мне нужно получить название скриптов такого типа (например, ролловер, карусель, слайд-шоу), чтобы найти его в Google.

«Опрокидывание» лучше всего подходит для того, что, я думаю, вы описываете. Вы используете mouseover события / mouseout или mouseenter / mouseleave (последние зависят от IE, но jQuery предоставляет их во всех браузерах, и иногда их немного проще использовать), чтобы получать уведомления о том, что вы должны изменить изображение, затем вы меняете изображение (присваивая свойству img элемента src , скрывая один img элементи показывать другой, играя в CSS-игры и т. Д. — Есть много способов).

Так, например (живая копия):

HTML:

 <p data-img="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32amp;d=identiconamp;r=PG">Mousing over this paragraph shows my gravatar.</p>
<p data-img="http://www.gravatar.com/avatar/8b12d17e2b54660de108a0995e1b5c3f?s=32amp;d=identiconamp;r=PG">Mousing over this one shows yours.</p>
<p>If you're not over either, we show Jon Skeet's.</p>
<img id="theImage" src="http://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=48amp;d=identiconamp;r=PG">
 

JavaScript:

 jQuery(function($) {
  var img = $("#theImage"),
      defaultImg = img[0].src;
  $("p[data-img]")
    .mouseenter(function() {
      img[0].src = $(this).attr("data-img");
    })
    .mouseleave(function() {
      img[0].src = defaultImg;
    });
});
 

Это просто очень, очень простой пример. Также часто предварительно загружаются изображения (чего я не делал выше), либо просто используя другие img элементы, которые находятся вне страницы (скажем, style="position: absolute; left: -10000px" ), либо загружая их из скрипта (создавая img элементы и назначая их src ). ). Таким образом, когда приходит время переключать изображения, в браузере уже есть изображение в кэше, и это происходит довольно плавно.