Ábhar Inrochtaithe a chruthú i HTML5 agus CSS3 Gan MARQUEE

Féadfaidh na daoine sin a scríobh HTML ar feadh i bhfad cuimhneamh a dhéanamh ar an eilimint. Bhí sé seo ina ghné ar leith do bhrabhsálaí a chruthaigh meirge téacs scrollaithe ar fud an scáileáin. Níor cuireadh an ghné seo leis an tsonraíocht HTML agus bhí éagsúlacht mhór ar thacaíocht dó thar na brabhsálaithe. Bhí tuairimí an-láidir ag daoine go minic maidir le húsáid an eilimint seo - dearfach agus diúltach. Ach an raibh grá agat nó gur ghorta tú é, d'fhreastail sé ar an ábhar ábhar a dhéanamh a bhí os cionn na teorainneacha bosca le feiceáil.

Mar chuid den chúis nach raibh na brabhsálaithe i bhfeidhm go hiomlán, ar leataobh ó thuairim phearsanta láidir, gur measadh éifeachtach é agus mar sin níor cheart an HTML a shainiú, rud a shainmhíníonn an struchtúr. Ina áit sin, ba cheart do CSS éifeachtaí amhairc nó cur i láthair a bhainistiú. Agus cuireann CSS3 an modúl mharcóige chun rialú a dhéanamh ar an gcaoi a gcuireann brabhsálaithe an éifeacht margaidh le heilimintí.

Airíonna Nua CSS3

Cuireann CSS3 cúig airíonna nua chun cabhrú le rialú a dhéanamh ar an gcaoi a thaispeánann do chuid ábhar sa pháirc: stíl ró-shreabhadh, stíl mhargaidh, marcáil-imirt-imirt, treoir-mhargaidh agus luas-mhargaidh.

stíl overflow
Sainmhíníonn an mhaoin stíle ró-shreabha (a phléigh mé freisin san Alt CSS Overflow) an stíl is fearr le haghaidh ábhar a théann thar an mbosca ábhar. Má shocraíonn tú an luach go dtí an mhargadh nó ar an mbarra, cuirfidh d'ábhar sleamhnán isteach agus amach go dtí an taobh clé / ar dheis (marquesa) nó suas / síos (bloc-mhargaidh).

stíl mhargaidh
Sainmhíníonn an mhaoin seo conas a ghluaiseoidh an t-ábhar isteach (agus amach).

Is iad na roghanna scrollaigh, sleamhnán agus malartach. Tosaíonn an scroll leis an t-ábhar go hiomlán as an scáileán, agus ansin bogann sé trasna an limistéir atá le feiceáil go dtí go mbeidh sé ar fad go hiomlán as an scáileán arís. Tosaíonn an sleamhnán leis an ábhar go hiomlán as an scáileán agus ansin bogann sé trasna go dtí go bhfuil an t-ábhar tar éis bogadh go hiomlán ar an scáileán agus níl aon ábhar níos mó fágtha chun sleamhnán ar an scáileán.

Ar deireadh, bíonn an malartach ag bualadh an t-ábhar ó thaobh go taobh, ag sleamhnú siar agus amach.

marquee-play-count
Ceann de na míbhuntáistí a bhaineann le húsáid an ghné MARQUEE ná nach stopann an pháirc riamh. Ach le marquee-play-count maoin stíl is féidir leat a leagtar ar an bpáirc an t-ábhar a rothlú ar uaireanta agus as uaireanta.

marquee-direction
Is féidir leat an treo a roghnú gur chóir an t-ábhar a scrollú ar an scáileán. Tá na luachanna ar aghaidh agus ar ais go bunúsach bunaithe ar threo an téacs nuair atá an stíl ró-shreabha mar líne margaidh agus suas nó síos nuair a bhíonn an stíl ró-shreabha mar bhloc-mhargaidh.

Sonraí Treoracha Marquee

stíl overflow Treo Teanga ar aghaidh droim ar ais
marquee-line ltr ar chlé ceart
rtl ceart ar chlé
bloc-mhargaidh suas síos

marquee-speed
Cinneann an mhaoin seo cé chomh tapa agus a chuireann an t-ábhar scroll ar an scáileán. Tá na luachanna mall, gnáth, agus go tapa. Braitheann an luas iarbhír ar an ábhar agus an bhrabhsálaí a thaispeánann é, ach ní mór go mbeadh na luachanna a bheith mall níos moille ná mar is gnách, agus tá sé níos moille ná go tapa.

Tacaíocht Brabhsálaí Airíonna na Mharcaí

D'fhéadfadh go mbeadh ort réimírí díoltóirí a úsáid chun eilimintí an mhargaidh CSS a fháil. Seo a leanas iad:

CSS3 Réimse Díoltóra
overflow-x: líne margaidh; overflow-x: -webkit-marquee;
stíl mhargaidh -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
marquee-direction: ar aghaidh | droim ar ais; -webkit-marquee-direction: forward | backwards;
marquee-speed -webkit-marquee-speed
aon choibhéiseach -webkit-marquee-increment

Ceadaíonn an mhaoin dheireanach duit a shainiú cé chomh mór nó is beag ba chóir go mbeadh na céimeanna mar an scrollaí ábhar ar an scáileán sa pháirc.

D'fhonn do mhargadh a bheith ag obair, ba cheart duit luachanna réamhshocraithe an díoltóra a chur ar dtús agus iad a leanúint le luachanna sonraíochta CSS3. Mar shampla, is é seo an CSS do pháirc a scrollaíonn an téacs cúig huaire ó chlé go deas taobh istigh de bhosca 200x50.

{
leithead: 200px; airde: 50px; spás bán: nowrap;
overflow: i bhfolach;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
overflow-x: líne margaidh;
marquee-direction: ar aghaidh;
stíl mhargaidh: scrollbharra;
marquee-speed: gnáth;
marquee-play-count: 5;
}