Створення валидной рядка, що біжить

Найчастіше, коли нам потрібно було зробити біжучий рядок на сайті, ми користувалися тегом MARQUEE. Однак, він не є дійсним, тому не проходить перевірку відповідності стандартам. У цьому уроці ми розглянемо створення валидной біжучого рядка на jQuery.

Створення валидной рядка, що біжить
Створення валидной рядка, що біжить

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

Підключимо фреймворк jquery і плагін jscroller до документа, для чого пропишемо наступний код між тегами :

далі пропишемо наступний скрипт:

Значення left в даному випадку показує напрямок руху рухомого рядка ліворуч. Замість нього можна також прописати right. up. down. що відповідно буде являтся напрямками направо. вгору і вниз .

Швидкість в прикладі дорівнює 10. Це значення можна змінити за Вашим бажанням.

Прибравши параметр true ми видалимо властивість зупинки рухомого рядка при наведенні курсору.

Між тегами head або в окремому css-файлі напишемо властивості блоку з рядком, що біжить:

Зрозуміло, Ви можете змінити ці стилі відповідно до дизайну Вашого сайту.

Тепер в тіло документа вставимо безпосередньо блок з рядком, що біжить. Для цього використовуємо наступний код:

Дійсний біжучий рядок готова! Забезпечення успіху на Ваших сайтах!

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

  • jQuery плагін для створення тимчасової шкали.

  • jQuery плагін для створення діаграми Ганта.

  • Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

    МіхаілГорюнов

    Дякуємо! Купу раз задавався цим питанням!

  • МіхаілГорюнов

    А як зробити плавний рух?

  • ПАСИБА за урок. Але є спосіб і легше, БеЗ скрипт ((=

  • Сергей_Патін

    МіхаілГорюнов, якщо зробити швидкість поменше (наприклад 1), то буде казатьзя, що рядок йде плавніше. Dmitro, так, є. Це невалидность тег MARQUEE.

  • Як застосувати в joomla?

  • валідність це що? і кому це потрібно? навіщо скриптами обважувати сайт, через таких другорядних завдань, нерозумно я думаю

  • BloodKnife

    Згоден з Cheiz, що зміниться то? від того що 1 невалідний тег буде присутній в коді.

  • Надлишки це, поскільки HTML має багато способів: ___________________________________________________ 1)Тест! Біжучий рядок ____________________________________________________ 2)Тест! Біжучий рядок ___________________________________________________ 3)Та, що біжить рядок 3

  • AssFucker, тег marquee рекомендують не застосовувати, хоча мені особисто досихпор з якогось дива) Але прислухаємося до думки професіоналів, до того ж при наведенні курсору на marquee текст не зупиняється, а це погодься дуже цікавий ефект, і іноді навіть дуже корисний

  • zhenya_polyakov
  • Потрібна річ, відображається у всіх браузерах однаково і до стандартів дружить! Явний мінус: marque тонше настроюється (час зміни блоку і число пікселів, на яке переміщається), тому можна домогтися, щоб всі їхало плавно. У пропонованому нам варіанті настройка тільки одна - швидкість. Як не налаштовуй - все одно буде "стрибати". Тим, хто не розуміє, для чого потрібен валідний код, рекомендую, наприклад, книжку Д.Зельдмана "Web-дизайн по стандартам" і т.п. Особливо прикольно, що все вщент ганять IE (він стандарти не підтримує!) І тут же задають питання - навіщо писати валідний код.

  • До речі, якщо в тег marque додати такий ось код: onmouseover = "this.stop ()" onmouseout = "this.start ()" то рядок теж буде зупинятися при наведенні курсору.

  • Підкажіть будь ласка, як зробити цю рядок, що біжить безперервною?

  • subscriber5

    Один мінус цієї рядка, що біжить: внизу екрану вона не встановлюється, потрібно переписувати java-script, а це під силу не кожному. Мені не підійшов цей варіант, т.к потрібно знизу.

  • Створення валидной рядка, що біжить

    За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

    Створення валидной рядка, що біжить

    Створення валидной рядка, що біжить

    Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

    Створення валидной рядка, що біжить

    Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

    Створення валидной рядка, що біжить

    Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!

    Схожі статті