нужен эффект опрокидывания для ряда из 9 флаконов для духов - PullRequest
Новая
       7

нужен эффект опрокидывания для ряда из 9 флаконов для духов

1 голос
/ 04 августа 2010

Для веб-сайта парфюмера я выкладываю на полку ряд из девяти флаконов.Это выглядит как одна непрерывная фотография.Я разрезал его на девять бесшовных срезов, каждый в отдельной ячейке таблицы со своим идентификатором.

Я думаю использовать jQuery, так как я хочу следующее при переходе:

  • Бутылка мигает мгновенно яркой и запускает короткий звуковой файл.
  • Через одну или две миллисекунды возвращается в нормальное состояние.
  • Действие повторяется только в случае размытия и повторного помещения.* Эффект одинаковый для каждой из 9 бутылок.

Муссаун (щелчок), вероятно, не нуждается в эффекте, он просто нацелен на страницу конкретной бутылки в фрейм главной страницы.Я сделал 9 альт.фрагменты, которые являются потертостями, но не умеют писать сценарии с временным эффектом.

Flash?Пожалуйста, даже не ходи туда;это сводит меня с умаOTOH, я нахожу jQuery элегантным.

Может быть, на мгновение проще наложить белый спрайт на изображение в начале ролловера?Как бы я поступил так?Большое спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 07 августа 2010

Я закончил тем, что делал это вообще без jQuery: просто прямой Javascript. В вашем коде Javascript вам понадобятся две функции для обработки изображений: 

function imgOn(id) {
    document.getElementById(id).src = 'img_on.jpg';
    setTimeout("imgOff('"+id+"')",1000);
}

function imgOff(id) {
    document.getElementById(id).src = 'img_off.jpg';
}

Ключевыми моментами здесь являются то, что вы правильно установили файлы изображений и установите желаемое время ожидания. Замените img_on.jpg именем файла для белой бутылки и замените img_off.jpg именем файла для обычной бутылки. Кроме того, он настроен на возврат через 1 секунду. Чтобы настроить это время, измените 1000 на другое значение.

Затем, когда вы действительно показываете изображения, используйте следующий HTML: 

<span onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</span>

Убедитесь, что каждое изображение имеет уникальное значение для id, и что значение, которое вы используете для id, также используется в вызовах onMouseOver и onMouseOut. Если эти изображения функционируют как ссылки, вы можете использовать следующее: 

<a href='page.html' onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</a>
0 голосов
/ 04 августа 2010

Есть ли у вас сценарий, с которого можно начинать ролловер изображений?Если это так, то все, что вам нужно добавить, - это вызов jQuery .delay() с функцией отключения изображения ролловера.Более подробную информацию о функции .delay() можно получить в jQuery api .

Если вам нужна помощь в развертывании и развертывании, вы можете найти то, что ищете, в ответах этот вопрос .

...