Tsim cov ntsiab lus Scrollable hauv HTML5 thiab CSS3 Tsis muaj MARQUEE

Cov neeg ntawm koj uas tau sau HTML rau ntev ntev yuav nco ntsoov lub npe. Qhov no yog ib qho browser uas yog lub hauv paus uas tsim tau ib daim ntawv ntawm scrolling ntawv hla qhov screen. No lub caij twb tsis tau ntxiv rau cov lus qhia HTML thiab kev txhawb nqa rau nws tau dav dav thoob browsers. Cov neeg feem ntau muaj kev xav zoo heev txog kev siv cov khoom no - ob qho tib si zoo thiab tsis zoo. Tab sis txawm tias koj hlub los yog ntxub nws, nws ua rau lub hom phiaj ntawm cov ntsiab lus uas overflowed lub thawv ciam pom.

Ib feem ntawm qhov nws ua rau nws tsis ua raws nraim li cov browsers, qhov ntawm lub zog ntawm tus kheej lub tswv yim, yog tias nws yog qhov pom tau tias nws muaj qhov muag pom thiab zoo li ntawd, nws yuav tsis raug txhais los ntawm cov HTML, uas txhais cov qauv. Xwb, kev pom los sis kev nthuav qhia yuav tsum raug tswj los ntawm CSS. Thiab CSS3 ntxiv cov txheej txheem marquee los tswj qhov kev sib tw browsers ntxiv cov kev siv nyiaj marquee .

Tshiab CSS3 Khoom

CSS3 ntxiv tsib yam khoom tshiab los pab tswj xyuas seb koj cov ntsiab lus nthuav tawm li cas nyob rau hauv lub marquee: hla dhau-style, marquee-style, marquee-play-count, marquee-direction and marquee-speed.

puv-style
Cov khoom ntiag tug (uas kuv tau sib tham nyob rau hauv tsab xov xwm CSS Overflow) txhais cov qauv zoo dua rau cov ntsiab lus uas cuam tshuam txog lub thawv ntsiab lus. Yog tias koj teev tus nqi rau marquee-line lossis marquee-block koj cov ntsiab lus yuav xaub rau sab laug thiab sab xis (marquee-line) lossis nce / down (marquee-block).

marquee-style
Cov cuab yeej no txhais tau tias cov ntsiab lus yuav hloov mus (thiab tawm).

Cov kev xaiv yog scroll, swb thiab lwm. Scroll pib nrog cov ntsiab lus tawm ntawm kev tshuaj ntsuam, ces nws txav mus hla qhov pom thaj tsam kom txog thaum nws tseem tag nrho tua tawm dua. Xaub pib nrog cov ntsiab lus tawm ntawm lub vijtsam thiab tom qab ntawd nws tsiv mus txog thaum cov ntsiab lus tau txav mus rau qhov kev tshuaj ntsuam thiab tsis muaj ntau cov ntsiab lus sab laug rau ntawm qhov screen.

Qhov kawg, hloov cov lus ntxim rau cov ntsiab lus ntawm ib sab mus rau sab, zawv zawg nraub qaum.

marquee-play-suav
Ib qho ntawm qhov teeb meem ntawm kev siv cov khoom tom qab no yog qhov kev txwv tsis pub nres. Tab sis nrog cov cuab yeej style marquee-play-count koj tuaj yeem teev cov sij hawm hloov lub ntsiab lus ntawm thiab tawm rau ib lub sij hawm ntau.

kev coj ua
Koj tuaj yeem xaiv cov kev taw qhia uas cov ntsiab lus yuav tsum tau hloov ntawm qhov screen. Tus nqi tseem ceeb rau pem hauv ntej thiab rov qab yog raws li cov lus sau hauv cov ntawv thaum lub phom-style yog marquee-line thiab nce lossis nqis los thaum lub phwj siab-style yog marquee-block.

Cov Lus Qhia Teeb Meem

puv-style Lus Qhia tom ntej rov qab
marquee-line ltr sab laug txoj cai
rtl txoj cai sab laug
marquee-block li down

marquee-ceev
Cov cuab yeej no yog txiav txim siab sai npaum li cas cov ntsiab lus nyob rau ntawm qhov screen. Qhov tseem ceeb qeeb, qhov qub, thiab yoo mov. Qhov tseeb khiav nyob ntawm cov ntsiab lus thiab qhov browser pom nws, tab sis qhov tseem ceeb yuav tsum qeeb yog qeeb qeeb tshaj li qub uas yog qeeb qeeb dua ceev.

Browser Kev Txhawb Nqa ntawm Marquee Properties

Tej zaum koj yuav tau siv tus neeg muag khoom ua ntej kom tau cov CSS taug txuj kev nyuaj los ua haujlwm. Lawv muaj raws li nram no:

CSS3 Vendor Prefix
txeej-x: marquee-line; hla-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-suav -webkit-marquee-repetition
taug txoj kev coj: kev xa | rov qab; -webkit-marquee-direction: forwards | rov qab;
marquee-ceev -webkit-marquee-ceev
tsis muaj sib npaug -webkit-marquee-increment

Cov cuab yeej kawg tau tso cai rau koj txhais tias loj npaum li cas los yog tsawg dua cov kauj ruam yuav tsum tau ua raws li cov ntsiab lus nyob rau hauv daim khij nyiab.

Thiaj li yuav ua rau koj ua haujlwm ua haujlwm, koj yuav tsum muab tus neeg muag khoom pov thawj ua ntej thiab ua raws li lawv nrog CSS3 specification qhov tseem ceeb. Piv txwv li, ntawm no yog CSS rau ib qho xwm txheej uas sau cov ntawv luam tawm tsib zaug ntawm sab laug mus rau sab xis hauv lub npov 200x50.

{
dav: 200px; qhov siab: 50px; dawb-qhov chaw: nowrap;
txeej: zais;
hla-x: -webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: qub;
-webkit-marquee-increment: me me;
-webkit-marquee-repetition: 5;
txeej-x: marquee-line;
txoj kev coj ua: taug kev;
marquee-style: scroll;
marquee-speed: qub;
marquee-play-count: 5;
}