Kaip sukurti nepertraukiamo teksto palapinę „JavaScript“.

Lawrence'as Manningas / Getty Images

Tai JavaScript kodas perkels vieną teksto eilutę, kurioje yra bet koks pasirinktas tekstas, per horizontalią žymės erdvę be pertraukų. Tai daroma pridedant teksto eilutės kopiją prie slinkties pradžios, kai tik ji išnyksta iš žymėjimo vietos pabaigos. Scenarijus automatiškai nustato, kiek turinio kopijų reikia sukurti, kad jūsų laukelyje niekada nepritrūktų teksto.

Taiscenarijustačiau turi keletą apribojimų, todėl pirmiausia juos apžvelgsime, kad tiksliai žinotumėte, ką gaunate.

• Vienintelė palapinės sąveika yra galimybė sustabdyti teksto slinkimą, kai pelė svyruoja virš palapinės. Jis vėl pradeda judėti, kai pelė pasitraukia. Galite įtraukti nuorodos tekste, o teksto slinkimo sustabdymas leidžia vartotojams lengviau spustelėti šias nuorodas.
• Naudodami šį scenarijų tame pačiame puslapyje galite turėti kelias palapines ir kiekvienam galite nurodyti skirtingą tekstą. Tačiau visos palapinės veikia tuo pačiu greičiu, o tai reiškia, kad užvedus pelės žymeklį, kuris sustabdo vienos palapinės slinkimą, visos puslapio žymės nustoja slinkti.
• Visas tekstas kiekvienoje palapinėje turi būti vienoje eilutėje. Galite naudoti įterptąsias HTML žymas, kad sukurtumėte teksto stilių, tačiau blokuojamos žymos ir žymos sulaužys kodą.

Teksto palapinės kodas

Pirmas dalykas, kurį turite padaryti, kad galėtumėte naudoti mano tęstinio teksto scenarijų, yra nukopijuoti toliau pateiktą informaciją JavaScript ir išsaugokite kaip marquee.js.

Tai apima kodą iš mano pavyzdžių, kurie prideda du naujus mq objektus su informacija apie tai, ką rodyti tose dviejose palapinėse. Galite ištrinti vieną iš jų ir pakeisti kitą, kad jūsų puslapyje būtų rodoma viena ištisinė palapinė, arba pakartoti tuos teiginius, kad pridėtumėte dar daugiau palapinių. Funkcija mqRotate turi būti vadinama perėjimu mqr po to, kai apibrėžiamos žymos, kurios apdoros sukimus.

|_+_|

|_+_|

Toliau scenarijų įterpiate į savo tinklalapį, puslapio antraštėje pridėdami šį kodą:

Pridėti stiliaus lapo komandą

Turime pridėti stiliaus lapo komandą, kad apibrėžtume, kaip atrodys kiekviena iš mūsų palapinių.

Štai kodas, kurį naudojome pavyzdiniame puslapyje:

|_+_|

Galite įdėti jį į išorinį stiliaus lapą, jei tokį turite, arba įdėti jį tarp žymų puslapio antraštėje.

Galite pakeisti bet kurią iš šių savo palapinės savybių; tačiau turi likti. |_+_|

Padėkite šventinę palapinę savo tinklalapyje

Kitas žingsnis yra apibrėžti div savo tinklalapyje, kuriame ketinate įdėti tęstinio teksto laukelį.

Pirmoji iš mano pavyzdinių palapinių naudojo šį kodą:

|_+_|

Klasė tai susieja su stiliaus lapo kodu. ID yra tai, ką naudosime naujajame mq() iškvietime, norėdami pridėti vaizdų laukelį.

Tikrasis palapinės teksto turinys patenka į „div“ span žymoje. Apimties žymos plotis bus naudojamas kaip kiekvienos palapinės turinio iteracijos plotis (plius 5 pikseliai, kad jie būtų atskirti vienas nuo kito).

Galiausiai įsitikinkite, kad „JavaScript“ kode, kuriuo norite pridėti mq objektą po puslapio įkėlimo, yra tinkamų verčių.

Štai kaip atrodo vienas iš mūsų teiginių pavyzdžių:

|_+_|

M1 yra mūsų div žymos ID, kad galėtume identifikuoti div, kuris turi rodyti palapinę.

Daugiau palapinių įtraukimas į puslapį

Jei norite pridėti papildomų žymių, HTML galite nustatyti papildomus „div“, suteikdami kiekvienam savo teksto turinį intervale; nustatykite papildomas klases, jei norite kitaip stilizuoti palapines; ir pridėkite tiek naujų mq() sakinių, kiek turite žymių. Įsitikinkite, kad mqRotate() iškvietimas seka juos, kad valdytų palapines už mus.