Ukudala I-Content Scrollable kwi-HTML5 ne-CSS3 Ngaphandle kwe-MARQUEE

Abo bafunde i- HTML ixesha elide bangakhumbula into. Le nto yayiyinto ekhethiweyo yombhrawuza eyadala ibhanki yokukrola isicatshulwa kwisikrini. Eli qela alizange lidibaniswe kwi- HTML icaciso kunye nenkxaso yalo ehlukahlukeneyo kwiinqwelo-mkhangeli. Abantu babesoloko benemibono enamandla kakhulu malunga nokusetyenziswa kwalolu hlobo - kokubili okulungileyo nokubi. Kodwa ukuba uyayithanda okanye uyayithiya, yasebenza ngenjongo yokwenza umxholo ogqithise imida ebhokisi ibonakala.

Ingxenye yesizathu esingazange iphunyezwe ngokugcwele yizikhupheli, ngaphandle kweembono eziqinileyo, kukuba oko kuthathwa njengento ebonakalayo kwaye kwaye, akufanele ichazwe yi-HTML, echaza isakhiwo. Endaweni yoko, iimbonakalo ezibonakalayo okanye zokubonisa kufuneka zilawulwe yiCSS. Kwaye i-CSS3 idibanisa imodyuli ye-marquee ukulawula indlela iibrowser zongeza ngayo umonakalo wempawu kwizinto.

Izinto ezintsha zeCSS3

I-CSS3 idibanisa iipropati ezintsha ezintlanu ukukunceda ukulawula indlela umxholo wakho ubonakalisa ngayo kwi-marquee: isitala sokuphuphuma, isitayela se-marquee, isibalo sokudlala, i-marquee-direction and speed-marquee.

indlela yokuphuphuma
Ipropati yesigxina (endixubusha nayo kwinqaku leCSS Ukuphumla) ichaza isitayela esikhethiweyo sokubhaliweyo okugqithisa ibhokisi lokuqukethwe. Ukuba ubeka ixabiso kwi-marquee-line okanye u-marquee-block umxholo wakho uya kululela ngaphakathi nangaphandle ukuya kumanxele / ngasekunene (umgca we-marquee) okanye phezulu / phantsi (i-marquee-block).

isitayela somdaka
Le propati ichaza indlela umxholo oya kuhamba ngayo (nangaphandle).

Okukhethwa kukho umgca, slide kunye nezinye. Umqulu uqala ngokugqithiseleyo umxholo, kwaye ke uhamba kwindawo ebonakalayo kude kube yilapho iphelile kwakhona isikrini. Isilayidi siqala ngokugqithiseleyo isiqulatho kwaye sihamba ngaphaya koko umxholo uphelele ngokupheleleyo kwisikrini kwaye akukho mxholo oshiywe ukudibanisa kwisikrini.

Ekugqibeleni, enye idonsa umxholo ukusuka kwicala ukuya kwelinye icala, ehamba phambili nangaphezulu.

ibalo lokudlala
Enye yeengxaki zokusebenzisa i-MARQUEE element kukuba i-marquee ayigumi. Kodwa nge-style style-marquee-play-count ungasetha i-marquee ukuba ijikeleze umxholo kwaye uphuphe inani elithile lamaxesha.

lathisi
Unokukhetha kwakhona isiqulatho esisemgangathweni kufuneka siskrole kwisikrini. Iimpawu eziphambili kwaye ziguquke zisekelwe kwicandelo lokubhaliweyo xa isitala sokugqithisa sisinomgca we-marquee kwaye senyuka okanye siphantsi xa isitala sokugqithisa sisitye.

Iinkcukacha zoLawulo lweMarquee

indlela yokuphuphuma Isikhokelo soLwimi phambili ukujika
umgca we-marquee ltr khohlo kunene
rtl kunene khohlo
i-marquee-block phezulu phantsi

i-speed-marquee
Le propati inquma indlela okukhawuleza ngayo umxholo okwikhutshana. Iimpawu zityhutyha, ziqhelekile kwaye zikhawuleza. Isantya esona sixhomekeke kumxholo kunye nomkhangeli wesibonakaliso, kodwa ixabiso kufuneka libe lucotha liye ludlula kunesiqhelo elincinci kunokukhawuleza.

Inkxaso yeSiphequluli seMarquee Properties

Unokudinga ukusebenzisa i- prefixes yokuthengisa ukuze ufumane amaqhosha e-CSS asebenze. Zizo zilandelayo:

CSS3 Umthengisi Prefix
ukuphuphuma-x: umgca we-marquee; ukuphuphuma-x: -webkit-marquee;
isitayela somdaka isitayela -webkit-marquee
ibalo lokudlala -ebkit-marquee-ukuphindaphinda
ulawulo lwe-marquee: phambili; -webkit-marquee-lathiso: phambili; phambili;
i-speed-marquee -ebkit-marquee-isivinini
akukho lilinganayo -ebkit-marquee-increment

Ipropati yokugqibela ikuvumela ukuba uchaze indlela ezinkulu okanye ezincinci amanyathelo afanele abe ngayo njengoko umxholo uphepha kwesikrini kwi-marquee.

Ukuze ube ne-marquee yakho esebenzayo, kufuneka ubeke umthengisi kuqala kwaye ulandele ixabiso leenkcukacha zeCSS3. Ngokomzekelo, nantsi i-CSS ye-marquee eyenza isicatshulwa ngokuphindwe kabini ukusuka kwesobunxele kuya kwesokudla ngaphakathi kwebhokisi le-200x50.

{
ububanzi: 200px; ubude: 50px; indawo emhlophe:
kuphuphuma; kufihlwe;
ukuphuphuma-x: -webkit-marquee;
-webkit-marquee-lathiso: phambili;
isitayela -webkit-marquee: pheqa;
-webkit-marquee-isivinini: eziqhelekileyo;
-ebkit-marquee-increment: encinci;
-ebkit-marquee-kuphinda: 5;
ukuphuphuma-x: umgca we-marquee;
i-marquee-lathiso: phambili;
isitayela sombala: pheqa;
i-speed-mark: evamile;
ibalo lokudlala umdlalo: 5;
}