A 'cruthachadh susbaint gluasadach ann an HTML5 agus CSS3 gun MARQUEE

Faodaidh cuimhne a bhith agad air an fheadhainn a tha air a bhith a 'sgrìobhadh HTML airson ùine mhòr. Bha seo na eileamaid a bha a 'sònrachadh brabhsair a chruthaich bratach teacsa sgròb air feadh an sgrion. Cha deach an eileamaid seo a chur ris a ' sònrachadh HTML a-riamh agus bha taic dha-rìribh eadar-dhealaichte thar brabhsairean. Gu tric bha beachdan làidir làidir aig daoine mu chleachdadh an eileamaid seo - an dà chuid adhartach agus àicheil. Ach co-dhiù an do ghràdhaich thu no gun do chaill thu e, rinn e seirbheis airson susbaint a dhèanamh a bha a 'toirt thairis air crìochan nam bogsa.

B 'e pàirt den adhbhar nach deach a thoirt gu buil gu bràth le brabhsairean, a bharrachd air beachdan pearsanta pearsanta, gun robh e air a mheas mar bhuaidh lèirsinneach agus mar sin, cha bu chòir a mhìneachadh leis an HTML, a tha a' mìneachadh an structair. An àite sin, bu chòir do CSS buaidh a thoirt air buaidhean lèirsinneach no taisbeanaidh. Agus tha CSS3 a 'cur ris a' mhodal marquee gus smachd a chumail air mar a tha brabhsairean a 'cur ris a ' bhuaidh mhargaidh ri eileamaidean.

Feartan CSS3 ùra

Cuiridh CSS3 còig thogalaichean ùra gus cuideachadh le smachd a chumail air mar a tha do shusbaint a 'taisbeanadh anns a' phàrchair: stoidhle thar-shruth, stoidhle caismeachd, cunntas-cluiche marcaidh, stiùireadh margaidh agus astar margaidh.

stoidhle thar-shruth
Tha an togalach stoidhle thar-shruth (a bhruidhinn mi cuideachd san artaigil CSS Overflow) a 'mìneachadh an stoidhle as fheàrr leotha airson susbaint a tha a' toirt thairis air a 'bhocsa susbaint. Ma shuidhicheas tu an luach gu loidhne marcae no bloc-pàrcaidh, bidh do shusbaint a 'dol a-steach agus a-mach chun chlì / deas (loidhne marcae) no suas / sìos (bloc-làimhe).

stoidhle pàillean
Tha an togalach seo a 'mìneachadh mar a ghluaiseas an susbaint a-steach (agus a-mach).

Is e na roghainnean a th 'ann an scroll, sleamhnachadh agus eile. Bidh an scroll a 'tòiseachadh leis an t-susbaint gu lèir air falbh bhon sgrìn, agus an uairsin gluaisidh e thairis air an àite a tha follaiseach gus am bi e gu tur air falbh bhon sgrion a-rithist. Bidh an sleamhnag a 'tòiseachadh leis an t-susbaint gu lèir air falbh bhon sgrìn agus an uairsin gluaisidh e air adhart gus am bi an susbaint air a ghluasad gu lèir air an sgrion agus chan eil barrachd stuth air fhàgail gus sleamhnachadh air an sgrìn.

Mu dheireadh, tha alternate a 'seachnadh an t-susbaint bho thaobh gu taobh, a' sleamhnachadh air ais is a-mach.

marques-cluiche-cunntadh
Is e aon de na duilgheadasan a th 'ann a bhith a' cleachdadh an eileamaid MARQUEE nach bi am pàillean a 'stad. Ach le marquee-play-count aig an stoidhle faodaidh tu am pàillean a chuir air dòigh gus an t-susbaint a thionndadh air falbh agus air falbh airson grunn uairean.

seòladh margaidh
Faodaidh tu cuideachd an stiùireadh a thaghadh a bu chòir an t-susbaint a ghluasad air an sgrion. Tha na luachan air adhart agus air ais air an suidheachadh air sligheachd an teacsa nuair a tha an stoidhle thar-shruth na loidhne marcae agus suas no sìos nuair a tha an stoidhle thar-shruth na bhlàr-mharc.

Fiosrachadh mu Marquee-Direction

stoidhle thar-shruth Stiùireadh Cànain air adhart air ais
loidhne mhargaidh ltr clì deas
rtl deas clì
bloc-pàillean suas sìos

Astar na Gaoithe
Tha an togalach seo a 'dearbhadh dè cho luath sa bhios an susbaint a' gluasad air an sgrion. Tha na luachan slaodach, àbhaisteach, agus luath. Tha an t-astar luath an crochadh air an t-susbaint agus am brabhsair a tha ga shealltainn, ach feumaidh na luachan a bhith slaodach nas slaodaiche na an àbhaist a tha nas slaodaiche na luath.

Taic le brabhsair air na togalaichean marquee

Dh'fhaoidte gum feum thu ro-leasachain reic a chleachdadh gus na h-eileamaidean marcae CSS a bhith ag obair. Tha iad mar a leanas:

CSS3 Riatanas neach-reic
overflow-x: loidhne mhargaidh; overflow-x: -webkit-marquee;
stoidhle pàillean -webkit-marquee-style
marques-cluiche-cunntadh -webkit-marquee-repetition
Stiùireadh marcae: air adhart | cùlaibh; -webkit-marquee-direction: air adhart | air ais;
Astar na Gaoithe -webkit-marquee-speed
chan eil co-ionann -webkit-marquee-increment

Leigidh an t-seilbh mu dheireadh dhut mìneachadh dè cho mòr no cho beag 'sa bu chòir na ceumannan a bhith mar a bhios an susbaint a' sgrìobadh air an sgrion anns a 'phàillean.

Gus am pàrchair agad a bhith ag obair, bu chòir dhut luachan a chaidh a shònrachadh an luchd-reic a chur an toiseach an toiseach agus an leantainn le luachan sònrachadh CSS3. Mar eisimpleir, an seo an CSS airson pàillean a tha a 'ruith an teacsa còig tursan bho chlì gu deas am broinn bogsa 200x50.

{
leud: 200px; àirde: 50px; geal-space: nowrap;
overflow: falaichte;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: air adhart;
stoidhle -webkit-marquee: scroll;
-webkit-marquee-speed: àbhaisteach;
-webkit-marquee-increment: beag;
-webkit-marquee-repetition: 5;
overflow-x: loidhne mhargaidh;
Stiùireadh marcae: air adhart;
stoidhle pàillean: scrolla;
astar marcae: àbhaisteach;
marquee-play-count: 5;
}