Creu Cynnwys Scrollable yn HTML5 a CSS3 Heb MARQUEE

Efallai y bydd y rhai ohonoch sydd wedi bod yn ysgrifennu HTML am gyfnod hir yn cofio'r elfen. Roedd hwn yn elfen benodol i borwr a oedd yn creu baner o destun sgrolio ar draws y sgrin. Ni chafodd yr elfen hon ei ychwanegu at y fanyleb HTML erioed, ac roedd cefnogaeth arno yn amrywio'n helaeth ar draws porwyr. Yn aml, roedd gan bobl farn gryf iawn ynghylch y defnydd o'r elfen hon - yn gadarnhaol ac yn negyddol. Ond p'un a oeddech chi'n caru neu'n ei chastio, roedd yn gwasanaethu pwrpas gwneud cynnwys sy'n gorlifo ffiniau'r blwch yn weladwy.

Rhan o'r rheswm na fu erioed ei weithredu'n llawn gan borwyr, ar wahân i farn bersonol gref, oedd ei fod yn cael ei ystyried yn effaith weledol ac felly ni ddylid ei ddiffinio gan yr HTML, sy'n diffinio'r strwythur. Yn hytrach, dylai CSS weld yr effeithiau gweledol neu gyflwyniad. Ac mae CSS3 yn ychwanegu modiwl y plisgyn i reoli sut mae porwyr yn ychwanegu'r effaith ychwaith i elfennau.

Eiddo CSS3 Newydd

Mae CSS3 yn ychwanegu pum eiddo newydd i helpu i reoli sut mae eich cynnwys yn arddangos yn y plisg: arddull gorlif, arddull y pyllau, parch-chwarae-cyfrif, gorymdaith a chyflymder y parc.

gorlif-arddull
Mae'r eiddo arddull gorlif (a drafodais hefyd yn yr erthygl Gorlif CSS) yn diffinio'r arddull a ffafrir ar gyfer cynnwys sy'n gorlifo'r blwch cynnwys. Os byddwch chi'n gosod y gwerth i leinfwrdd neu bloc plasty, bydd eich cynnwys yn llithro i mewn i'r tu mewn i'r chwith / i'r dde (y parc-linell) neu i fyny / i lawr (bloc y barc).

arddull ymylol
Mae'r eiddo hwn yn diffinio sut y bydd y cynnwys yn symud i mewn i'r golwg (ac allan).

Mae'r opsiynau yn sgrolio, sleidiau ac yn ail. Mae'r sgrol yn dechrau gyda'r cynnwys yn gyfan gwbl oddi ar y sgrin, ac yna mae'n symud ar draws yr ardal weladwy nes ei fod i gyd yn gyfan gwbl oddi ar y sgrin eto. Mae sleidiau'n dechrau gyda'r cynnwys yn gyfan gwbl oddi ar y sgrin ac yna mae'n symud ymlaen nes bod y cynnwys wedi symud yn llawn ar y sgrîn ac nid oes mwy o gynnwys ar ôl i'r sleid ar y sgrin.

Yn olaf, yn ail yn sbonio'r cynnwys o ochr i ochr, llithro yn ôl ac ymlaen.

parc-chwarae-cyfrif
Un o'r anfanteision o ddefnyddio elfen MARQUEE yw na fydd y parcharor byth yn dod i ben. Ond gyda pharch-chwarae cyfrif yr arddull gallwch chi osod y parc i gylchdroi'r cynnwys ar ac am byth am nifer penodol o weithiau.

cyfeiriad pyllau
Gallwch hefyd ddewis y cyfeiriad y dylai'r cynnwys sgrolio ar y sgrin. Mae'r gwerthoedd yn ôl ac yn y cefn yn seiliedig ar gyfeiriadedd y testun pan fydd yr arddull gorlifol yn llinell ymylol ac i fyny neu i lawr pan fydd yr arddull gorlif yn bloc plasty.

Manylion Cyfarwyddyd Cylchdaith

gorlif-arddull Cyfeiriad Iaith ymlaen cefn
leinfwrdd ltr chwith yn iawn
rtl yn iawn chwith
bloc pyllau i fyny i lawr

cyflymder y parc
Mae'r eiddo hwn yn pennu pa mor gyflym y mae'r cynnwys yn sgrolio ar y sgrin. Mae'r gwerthoedd yn araf, yn normal, ac yn gyflym. Mae'r cyflymder gwirioneddol yn dibynnu ar y cynnwys a'r porwr sy'n ei ddangos, ond mae'n rhaid i'r gwerthoedd fod yn arafach yn arafach na'r arfer sy'n arafach nag yn gyflym.

Cymorth Porwr yr Eiddo Gwag

Efallai y bydd angen i chi ddefnyddio rhagddodynnau gwerthwr i gael elfennau'r barciau CSS i weithio. Maent fel a ganlyn:

CSS3 Gwerthwr Gwerthwr
overflow-x: llinell ymylol; gorlifo-x: -gwisg-marchog;
arddull ymylol -webkit-marquee-style
parc-chwarae-cyfrif -mennill-marwolaeth-ailadrodd
cyfeiriad y palmant: ymlaen | cefn; -webkit-marquee-direction: ymlaen | yn ôl;
cyflymder y parc -webkit-marquee-speed
dim cyfatebol -gynnig-marchogaeth-cynyddiad

Mae'r eiddo diwethaf yn caniatáu i chi ddiffinio pa mor fawr neu fach ddylai'r camau fod wrth i'r cynnwys sgrolio ar y sgrin yn y parc.

Er mwyn cael eich barbeciw yn gweithio, dylech osod y gwerthoedd rhagwerthwyr yn gyntaf ac yna eu dilyn â gwerthoedd manyleb CSS3. Er enghraifft, dyma'r CSS ar gyfer barlys sy'n sgrolio'r testun bum gwaith o'r chwith i'r dde y tu mewn i flwch 200x50.

{
lled: 200px; uchder: 50px; gofod gwyn: nowrap;
gorlif: cudd;
gorlifo-x: -gwisg-marchog;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-chwanegiad-gwisg-marchog: bach;
-march-marchogaeth-ailadrodd: 5;
overflow-x: llinell ymylol;
cyfeiriad parchau: ymlaen;
arddull ymylol: sgrolio;
cyflymder y parc: normal;
parc-chwarae-cyfrif: 5;
}