/ / Skapa HTML-krypande linje

Skapa HTML krypande linje

För att skapa krypande linje har HTMLden avslutande <markerings> -taggen. Den kan inte bara innehålla text utan även andra element: tabeller, bilder, formulär och så vidare. Med hjälp av attribut specificeras inte bara horisontell rörelse utan också vertikal rörelse. För det senare måste fälthöjden anges.

Intressant nog, initialt hanskapades för Internet Explorer-webbläsaren och andra lärde sig att förstå det senare. Även om det vanligtvis händer det motsatta, och det är webbläsaren från Microsoft som alltid fungerar som en efterbliven, vilket skapar många problem för programmerare.

HTML-kod

Relevans

<marquee> - HTML-genomsökningstagg. Den stöds av alla nuvarande versioner av webbläsare. I detta avseende finns det inga problem, och du kan använda det säkert.

När det gäller semantik är det emellertid föråldrat och ingår inte längre i HTML-specifikationen. Därför valideras inte koden som innehåller den här taggen.

Vad är orsaken till detta?I modern HTML finns det ingen krypande linje, eftersom all animering och styling görs av CSS. Ibland måste du också använda JS. Följaktligen är HTML endast ansvarig för markeringen. <marquee> fungerar dock bra, tack vare dess fortsatta kompatibilitet med äldre versioner.

Syntax

I HTML ställs den krypande raden av den avslutande taggen:

<marquee> ... </marquee>

Inte bara text kan placeras inuti, utan även andra element, till exempel fotografier eller tabeller. Kom ihåg att även om den här koden fungerar kommer den inte att gälla.

Ticker

Rullande hastighet

Du kan kontrollera genomsökningsrader i HTML med attribut. Rörelseshastigheten ställs in genom attributet scrollamount. Det kommer att se ut så här:

<marquee scrollamount = "1"> lite text </marquee> 

Förändringen i hastighet sker på grund av konstantenta bort information om textens position och visa den på en ny plats. Genom att ändra värdet i attributet ställer vi in ​​antalet pixlar mellan den gamla positionen och den nya. Följaktligen, ju högre värde desto högre hastighet. Detta attribut stöds av alla webbläsare.

Om rullningshastigheten är för snabb,automatisk begränsning aktiveras för att hålla texten läsbar. Om du behöver kringgå denna begränsning anger du truespeed-attributet. Observera att inte alla webbläsarversioner förstår det. IE och Firefox kan arbeta med det.

Fördröjningen mellan rullningstexten kan ställas in med attributet scrolldelay.

Rulla i rutan

Efter bredd upptar taggen hela föräldrarnas breddelement. Och i höjd kommer det att vara lika med innehållet inuti. För att ändra detta måste du använda två attribut för höjd och bredd. Dessa är höjd respektive bredd. Du kan använda pixlar eller procentsatser.

Det finns också ytterligare två attribut, nämligen hspace ochvspace. De är nödvändiga för att skapa vitt utrymme runt genomsökningslinjen, eller snarare, indrag. Avståndet ställs in horisontellt respektive vertikalt.

Rörelse parametrar

Förutom hastighet kan du ställa in andrarörelseparametrar. Rörelseriktningen styrs av riktningsattributet. Som standard flyttas texten från höger till vänster. Denna rörelse motsvarar värdet av rätt. För att få texten att röra sig i motsatt riktning anger du bara vänster så ser den ut så här:

<markeringsriktning = "vänster"> ... </marquee>

Förutom horisontell rullning kan du också ange vertikal rullning. Vi använder uppåt för att flytta upp innehållet och nedåt för att flytta neråt.

För att ändra rörelsens natur finns det två tillintressant och användbart attribut. Du kan ställa in antalet rullar efter vilket innehållet kommer att stanna vid dess extrema position och inte röra sig. Den här egenskapen motsvarar loop-attributet. Standardvärdet är -1. Om den är inställd på 0 rör sig inte texten alls. Heltals över 0 startar räknaren.

Det mer voluminösa attributet är beteende.Han är ansvarig för hur innehållet flyter. Standard är bläddra. Det betyder att innehållet kommer att röra sig i en viss riktning, och när det är helt dolt, kommer det att börja sin rörelse igen.

Om det finns lite innehåll kan du ställa in attributetalternativt värde. Efter att ha nått den extrema punkten börjar innehållet röra sig i motsatt riktning. Och så oändligt många gånger, om räknaren inte är inställd.

Det sista värdet är bild. Det instruerar innehållet att gå till slutet och sluta.

HTML för markering, CSS för stilar

stilar

Taggen <marquee> innehåller ett attribut bgcolor som låter dig ställa in radens bakgrundsfärg. Som standard är det samma som sidan.

HTML räcker inte för att skapa en fin krypande linje. Stilar måste användas. Till exempel om vi vill göra texten vackrare:

<markeringsrulle scrollamount = "1" style = "color: # D9470D; font-size: 40px; font-vikt: djärvare; linjehöjd: 150%; "> Ticker </marquee>

ansökan

Det finns många sätt att använda den krypande linjen.Du kan bara använda löpande text för att fånga uppmärksamhet. Det är möjligt att skapa en slags informator som innehåller en stor mängd text. Du kan också infoga en serie bilder som rör sig smidigt. Detta kommer att visa mer innehåll.

En löpande rad i HTML-kod hjälper dig att skapa en enkel animation om du använder en animerad bild, till exempel en löpande man.

Inte bara text finns i rullningslinjen

resultat

Vi har beskrivit hur man skapar en genomsökningsrad i HTML.Detta är en ganska enkel metod och lätt att lära sig. Det är dock föråldrat och godkänns inte. Jag fick inte vidare utveckling och support, vilket kan orsaka problem när jag arbetar i olika webbläsare.

CSS är bättre för animering

Vi rekommenderar inte att du använder den.För att skapa krypande linje, eller snarare animering i allmänhet, har CSS3 en unik @keyframes-regel. Det låter dig skapa sekventiella bildramar. Och animationsegenskapen bestämmer redan leveransen av just denna animation. Denna verktygslåda ger mycket mer funktionalitet än den äldre <marquee> -taggen. Det är också mycket bekvämare att använda, och viktigast av allt, det är vad de har strävat efter i många år: att rensa HTML för onödigt skräp och göra det mer läsbart och strukturerat.