Рядок, що біжить на JavaScript своїми руками, Mihalytch personal blog

Все про високі технології

Social Network

Feed RSS Subscribe Feed
Twitter Follow Me
Facebook Add Me

Перекодування CP1251 в UTF8

26 February in PHP

Перекодування UTF-8 в CP1251

Аналог foreach в javascript

2 March in Гумор

Сьогодні мова піде про створення простого скрипту для імітації ефекту рядка, що біжить. Для початку придумаємо, як це працюватиме. По ідеї повинен бути зовнішній контейнер, який визначить розміри блоку рядка, що біжить, і її положення в просторі на сторінці, назвемо його marquee_container. Також повинен існувати блок, що містить текст, що біжить, назвемо його - marquee_text.

Тепер має бути все просто, ми задаємо батьківському блоку фіксовану ширину, position: relative (для того, щоб ми могли абсолютно позиціонувати блок із текстом щодо поточного), overflow: h > Для того, щоб розрахувати момент, коли текст повністю сховається за лівою межею, нам потрібно дізнатися про справжню ширину блоку з текстом. Якщо наш текстовий блок буде у marquee_container із заданою шириною, скрипт нам покаже ширину не більше нами заданої. Тому нам потрібний ще один блок (marquee_subcontainer). Задамо йому ширину width:9999999px і помістимо в нього текстовий блок. Тепер проблему з визначенням ширини вирішено.

Складемо HTML код рядка, що біжить:

Тепер складемо таблицю CSS стилів відповідно до наших міркувань:

Коли всі попередні приготування зробили, можна розпочати написання JS коду.

Тепер можемо ознайомитись із робочим прикладом.

UPD 1: В IE6 не коректно спрацьовував overlow: hidden длябатьківського блоку. Дочірній див з position:absolute відображався повністю, незалежно від меж батьківського блоку. Виявилося потрібно просто додати властивість position: relative та блоку з overflow: hidden.

А в яких випадках добре використовувати імітацію рядка, що біжить?! Просто цікаво!