Найчастіше, коли нам потрібно було зробити біжучий рядок на сайті, ми користувалися тегом 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)
AssFucker, тег marquee рекомендують не застосовувати, хоча мені особисто досихпор з якогось дива) Але прислухаємося до думки професіоналів, до того ж при наведенні курсору на marquee текст не зупиняється, а це погодься дуже цікавий ефект, і іноді навіть дуже корисний
zhenya_polyakov
Потрібна річ, відображається у всіх браузерах однаково і до стандартів дружить! Явний мінус: marque тонше настроюється (час зміни блоку і число пікселів, на яке переміщається), тому можна домогтися, щоб всі їхало плавно. У пропонованому нам варіанті настройка тільки одна - швидкість. Як не налаштовуй - все одно буде "стрибати". Тим, хто не розуміє, для чого потрібен валідний код, рекомендую, наприклад, книжку Д.Зельдмана "Web-дизайн по стандартам" і т.п. Особливо прикольно, що все вщент ганять IE (він стандарти не підтримує!) І тут же задають питання - навіщо писати валідний код.
До речі, якщо в тег marque додати такий ось код: onmouseover = "this.stop ()" onmouseout = "this.start ()" то рядок теж буде зупинятися при наведенні курсору.
Підкажіть будь ласка, як зробити цю рядок, що біжить безперервною?
subscriber5
Один мінус цієї рядка, що біжить: внизу екрану вона не встановлюється, потрібно переписувати java-script, а це під силу не кожному. Мені не підійшов цей варіант, т.к потрібно знизу.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!