![]() |
Модераторы: Sardar, Aliance |
![]() ![]() ![]() |
|
petyaeva |
|
|||
![]() Бесконечная карусель Профиль Группа: Участник Сообщений: 25 Регистрация: 31.7.2009 Где: Орехово-Зуево Репутация: нет Всего: нет |
Есть скрипт - вот он в примере смена картинок
При помощи этого скрипта я сделала меню - вверху список художников, под ним большая картина, которая меняется соответственно художнику, на которого наведена мышка. Но смена изображения происходит очень быстро и получается некрасиво. А можно ли добавить плавности? Или лучше использовать другой способ? (В яваскрипте я не сильна) |
|||
|
||||
CruorVult |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 868 Регистрация: 24.9.2008 Где: г.Киев, Украина Репутация: 3 Всего: 28 |
||||
|
||||
Hanut |
|
||||
Новичок Профиль Группа: Участник Сообщений: 8 Регистрация: 2.7.2010 Репутация: 1 Всего: 2 |
Не знаю, подойдет вам такой способ, или нет. Недостатком может быть то что он подгружает все картинки сразу, включая и невидимые. Посмотреть как работает смена картинок затуханием можно здесь http://norse.ru/pub/184.html
___________ Этот код надо вынести в отдельный .js файл, к примеру test.js. Редактировать в нем ничего не надо.
Пример HTML разметки.
Необходимо соблюсти связь идентификаторов в теге img (id="img_1") и в вызове функции J_over('img_1'). Источник картинки (src="/img/1-picture.jpg") может иметь любой путь. Это сообщение отредактировал(а) Hanut - 21.7.2010, 19:37 |
||||
|
|||||
petyaeva |
|
|||
![]() Бесконечная карусель Профиль Группа: Участник Сообщений: 25 Регистрация: 31.7.2009 Где: Орехово-Зуево Репутация: нет Всего: нет |
Hanut, большое человеческое спасибо!
К сожалению, нет возможности поставить плюсик - мало постов. Все получилось здорово. Сейчас мне кажется, немножко слишком быстро идет исчезание - смотрю на локале. Наверное, есть возможность менять скорость, но я как-то не уверена, стоит ли... А если попробовать еще замедлить процесс исчезания-появления - где это правится, в таймере
|
|||
|
||||
petyaeva |
|
|||
![]() Бесконечная карусель Профиль Группа: Участник Сообщений: 25 Регистрация: 31.7.2009 Где: Орехово-Зуево Репутация: нет Всего: нет |
А в Эксплорере-то плавности нет как нет!
![]() |
|||
|
||||
Hanut |
|
||||||||
Новичок Профиль Группа: Участник Сообщений: 8 Регистрация: 2.7.2010 Репутация: 1 Всего: 2 |
Извиняюсь за недосмотр. Это необъяснимая особенность IE; слой содержащий картинки должен иметь параметр абсолютного позиционирования. То есть, рабочий пример будет выглядеть так:
Как вариант, можно заменить position: absolute; на фиксированный размер width: 320px; height: 240px;, так тоже будет работать. Если у всех ваших картинок одинаковый размер, то проблем не будет, если размеры разные, то скрипт придется переделать немного. На счет времени затухания, то оно устанавливается здесь:
Таймер появления здесь:
Попробуйте подобрать свои значения таймера, но при его увеличении вы заметите неприятную ступенчатость при смене прозрачности. |
||||||||
|
|||||||||
petyaeva |
|
|||
![]() Бесконечная карусель Профиль Группа: Участник Сообщений: 25 Регистрация: 31.7.2009 Где: Орехово-Зуево Репутация: нет Всего: нет |
Все ясно. Должно быть не просто абсолютное позиционирование слоя с картиной, а еще чтобы этот див не был внутри какого-либо другого дива, тогда все работает.
Это сообщение отредактировал(а) petyaeva - 23.7.2010, 09:11 |
|||
|
||||
Hanut |
|
|||
Новичок Профиль Группа: Участник Сообщений: 8 Регистрация: 2.7.2010 Репутация: 1 Всего: 2 |
Вложенность в другой div вроде никак не влияет. Хотя объяснить поведение фильтра Alpha достаточно сложно, с атрибутом opacity в IE все очень запутано и не документировано.
Документация здесь: MSDN. Если будут какие-то трудности, то пишите, постараемся разобраться. |
|||
|
||||
wiihau |
|
|||
Новичок Профиль Группа: Участник Сообщений: 4 Регистрация: 28.7.2010 Репутация: нет Всего: нет |
Привет!
А подскажите совсем зеленому в javascript человеку как на основе вышеприведенного сделать следующее: У меня система видеонаблюдения при движении объекта посылает по фтп на сервер картинки с названием snapshot{N}, где N - порядковый номер идущий в бесконечность. В приведенном примере все картинки изначально прописаны и задано имя первой в списке отображения. На своем сайте я хочу, чтобы первой отображалась картинка с последним номером (она же последняя созданная) и была возможность прокручивать назад и потом вперед. Если это сделать невозможно, то сошло бы и простое отображение последних десяти созданных картинок (фотографий). Заранее спасибо за ответ и если возможно разжевать по строчкам как настоящему новичку. |
|||
|
||||
Hanut |
|
|||
Новичок Профиль Группа: Участник Сообщений: 8 Регистрация: 2.7.2010 Репутация: 1 Всего: 2 |
wiihau, я помогу, если вы уточните:
1) Как именно выглядят файлы? Как snapshot33.jpg? 2) Допустим, вы выбрали из каталога последнюю картинку snapshot33.jpg, на какие картинки надо перелистывать? snapshot32.jpg, затем snapshot31.jpg и т. д.? То есть, номер предыдущей картинки будет меняться, как номер текущей минус один? Или они идут не последовательно? 3) Много картинок предполагается просматривать? Если больше десяти, то надо будет подгружать картинки динамически, при перелистывании, а не сразу все при загрузке страницы. |
|||
|
||||
wiihau |
|
|||
Новичок Профиль Группа: Участник Сообщений: 4 Регистрация: 28.7.2010 Репутация: нет Всего: нет |
1) snapshot033.jpg
2) Изначально должна отображаться последняя загруженная фотография (соответвтенно с наибольшим индексом). При прокрутке вперед ничего не изменится, при прокрутке назад будет snapshot032. С него уже можно и назад по порядку и вперед. 3) Я понял засаду. Предполагается просматривать все картинки. Их может быть больше сотни. Поэтому видимо этот метод мне не подойдет. Вижу решение как изначально отображать последние 6 фотографий в таблие 2х3, а при переходе на страницу назад, отображать шесть фоток начиная с "последняя - 12". Как будет выглядеть код в этом случае? Или мне лучше создать отдельную тему? |
|||
|
||||
![]() ![]() ![]() |
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | JavaScript: для новичков | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |