Jak utworzyć ciągłą markizę tekstową w JavaScript?

Lawrence Manning/Getty Images

Ten JavaScript kod przesunie pojedynczy ciąg tekstowy, który zawiera dowolny wybrany tekst, przez poziomą ramkę zaznaczenia bez przerw. Robi to, dodając kopię ciągu tekstowego na początku zwoju, gdy tylko zniknie on z końca obszaru zaznaczenia. Skrypt automatycznie oblicza, ile kopii treści musi utworzyć, aby zapewnić, że nigdy nie zabraknie Ci tekstu w Twojej markizie.

Tenscenariuszma jednak kilka ograniczeń, więc omówimy je najpierw, abyś wiedział dokładnie, co otrzymujesz.

• Jedyną interakcją, jaką oferuje markiza, jest możliwość zatrzymania przewijania tekstu, gdy ​ mysz unosi się nad namiotem. Zaczyna się ponownie poruszać, gdy mysz się oddala. Możesz dołączyć spinki do mankietów w tekście, a zatrzymanie przewijania tekstu ułatwia użytkownikom klikanie tych linków.
• Za pomocą tego skryptu możesz mieć wiele markiz na tej samej stronie i dla każdej z nich możesz określić inny tekst. Wszystkie markizy działają jednak z tą samą szybkością, co oznacza, że ​​najechanie kursorem myszy, które zatrzymuje przewijanie jednej markizy, powoduje, że wszystkie markizy na stronie przestają się przewijać.
• Tekst w każdej markizie musi znajdować się w jednym wierszu. Możesz użyć wbudowanych tagów HTML do stylizacji tekstu, ale tagi blokowe i tagi zepsują kod.

Kod dla markizy tekstowej

Pierwszą rzeczą, którą musisz zrobić, aby móc korzystać z mojego ciągłego skryptu markizy tekstu, jest skopiowanie następującego JavaScript i zapisz to jako marquee.js.

Obejmuje to kod z moich przykładów, który dodaje dwa nowe obiekty mq zawierające informacje o tym, co wyświetlić w tych dwóch markizach. Możesz usunąć jedną z nich i zmienić drugą, aby wyświetlić jedną ciągłą markizę na swojej stronie lub powtórzyć te stwierdzenia, aby dodać jeszcze więcej markiz. Funkcja mqRotate musi być wywołana przekazywaniem mqr po zdefiniowaniu markiz, ponieważ obsługuje ona rotacje.

|_+_|

|_+_|

Następnie wstawiasz skrypt na swoją stronę internetową, dodając następujący kod w sekcji head strony:

Dodaj polecenie arkusza stylów

Musimy dodać polecenie arkusza stylów, aby zdefiniować wygląd każdej z naszych markiz.

Oto kod, którego użyliśmy dla tych na naszej przykładowej stronie:

|_+_|

Możesz umieścić go w swoim zewnętrznym arkuszu stylów, jeśli taki masz, lub umieścić go między tagami w nagłówku strony.

Możesz zmienić dowolną z tych właściwości swojej markizy; jednak musi pozostać. |_+_|

Umieść markizę na swojej stronie internetowej

Następnym krokiem jest zdefiniowanie elementu div na swojej stronie internetowej, w którym zamierzasz umieścić ciągłą markizę tekstową.

Pierwsza z moich przykładowych markiz używała tego kodu:

|_+_|

Klasa kojarzy to z kodem arkusza stylów. Id użyjemy w nowym wywołaniu mq() do dołączenia markizy obrazów.

Rzeczywista zawartość tekstowa markizy znajduje się wewnątrz elementu div w znaczniku span. Szerokość znacznika span będzie używana jako szerokość każdej iteracji treści w ramce (plus 5 pikseli tylko po to, aby je od siebie oddzielić).

Na koniec upewnij się, że Twój kod JavaScript, aby dodać obiekt mq po załadowaniu strony, zawiera prawidłowe wartości.

Oto jak wygląda jedna z naszych przykładowych instrukcji:

|_+_|

m1 jest identyfikatorem naszego znacznika div, dzięki czemu możemy zidentyfikować element div, który ma wyświetlać markizę.

Dodawanie kolejnych markiz do strony

Aby dodać dodatkowe markizy, możesz ustawić dodatkowe elementy div w kodzie HTML, dając każdemu własną treść tekstową wewnątrz zakresu; skonfiguruj dodatkowe klasy, jeśli chcesz inaczej stylizować namioty; i dodaj tyle nowych instrukcji mq(), ile masz ramek. Upewnij się, że wywołanie mqRotate() następuje po nich, aby obsługiwać za nas markizy.