ПредишенСледващото

Рейтинг: 5/5

А запознати част от дизайна на уеб страница е станал плавна промяна на изображението. За да го изпълни, има няколко подхода. Можете да използвате GIF-анимация. В същото време, за да се осигури достатъчно флуидност, е необходимо да се използват много кадри.

Друга особеност на сценария е, че с изключение на гладка промяна на изображения, всяко изображение може да бъде препратка към ресурса. Колко снимки - много връзки към различни ресурси. Можете да проверите! Една интересна алтернатива на банери?

Javascript гладък образ промяна
Javascript гладък образ промяна
Javascript гладък образ промяна
Javascript гладък образ промяна

На снимката можете да видите как работи скрипта. Брой на променящите се образи, време за показване на всеки кадър и времето за преминаване е лесно да се промени.

Smooth промяна на изображение се реализира в (функция ChangeImage). Линия 93 създава таймер с ID play_id. Обадете се на тази функция в интервал time_show. Значение старт = 0 отговаря на таймера за активност. Ако загубите фокус на прозореца на браузъра (преместен в друг раздел, дори и към друго приложение) play_id таймер спира линия 78. Стойността започне = 1 съответства на "сън" таймер. Когато се върнете в центъра на прозореца на браузъра стартира таймер линия 86.

Първия път, таймерът е започнал play_id линия 93, а не 86, защото на браузъри Google Chrome. Opera и Safari веднага след зареждането на страницата window.onfocus манипулатор не се нарича и изображението не се променя.

  • след загубата и да се върнете на фокуса (можете прехвърляни към друг раздел на браузъра, в друго приложение, а след това се върнете на тази страница) изображения, първоначално ще бъдат променени бързо "naskakivaya" един към друг
  • да бъдат поставени на една страница на няколко пресечки бавно променящи се изображения и, ако не сте програмист, има трудности

Тези недостатъци са метод за използване на CSS - статия Разтворете изображения CSS3 част 1 и плавен преход от изображения CSS3 Част 2. Има също е смятан за един от ефектите на гладка промяна на изображението - промяна на въртене.

Подкрепете проекта - споделете линка, благодаря!