Kugadzira Scrollable Content mu HTML5 neCSS3 Pasina MARQUEE

Vaya vanga vachinyorera HTML kwenguva yakareba vanoyeuka chinhu. Ichi chaiva chekushandura-chinonzi chinhu chakagadzira bhenekeri yekunyora magwaro pese pa skrini. Ichi chinhu chakanga chisati chawedzerwa kuhutano hwekutevedza uye hutsigiro kwahwo zvakasiyana zvakanyanya kune dzimwe browsers. Vanhu vaigara vaine maonero akasimba pamusoro pekushandiswa kwechinhu ichi - zvose zvakanaka uye zvisina kunaka. Asi kana iwe uchida kana kuti uchizvivenga, yakashandira chinangwa chokugadzira zvinyorwa izvo zvakaputika mumiganhu yebhokisi inoratidzika.

Chikamu chechikonzero chakanga chisingambokwanisi kushandiswa nevashandisi, kunze kwemafungiro evanhu, chakange chichionekwa sechinhu chinoonekwa uye saizvozvo, hazvifananidzi kurondedzerwa ne HTML, iyo inotsanangura chimiro. Pane kudaro, kuonekwa kana kuenzanisa zvinokonzera kunofanira kutungamirirwa neCSS. Uye CSS3 inowedzera marquee module kuti ione kuti mabhiiyo anotora sei marquee effect kune zvikamu.

Zvitsva CSS3 Properties

CSS3 inowedzera zvinhu zvishanu zvitsva kuti zvibatsire kudzora kuti zvinyorwa zvinoratidza sei mumarquee: kuwedzera-style, marquee-style, marquee-play-count, marquee-direction uye marquee-speed.

overflow-style
Iyo yakazara-style property (iyo yandakakurukura zvakare munyaya CSS Yakazara) inotsanangura nzira yakasarudzwa yezviri mukati iyo inowedzera zviri mukati bhokisi. Kana iwe ukaisa kukosha kune marquee-line kana marquee-bvisa zvaunenge uine zvichapindira mukati nekubuda kuruboshwe / kurudyi (marquee-line) kana kumusoro / pasi (marquee-block).

marquee-style
Iyi pfuma inotsanangura kuti zvinyorwa zvichaenderera sei pakuona (uye kunze).

Zvisarudzo zviri mupumburu, slide uye zvimwe. Mipumburu inotanga nehuwandu zvachose kubva pachigadziko, uye iyo inofamba ichienda kunharaunda inooneka kusvikira isati yapera zvachose skrini zvakare. Slide inotanga nehuwandu zvachose kubva pachigadziko uye zvino inofambisa kusvikira zvinyorwa zvanyatsoenderera kuchikwangwani uye hapanazve zvimwe zvasara kuti zvisike pahwindo.

Pakupedzisira, imwe nzira inoburitsa zvinyorwa kubva kune rumwe rutivi, zvichienda mberi uye zvichienda.

marquee-play-count
Chimwe chezvipingamupinyi zvekushandisa MARQUEE chinhu chekuti marquee haambomira. Asi nemutauro marquee-play-count iwe unogona kuisa marquee kuti ichinje zvinyorwa uye zvinoenda kune imwe nhamba yenguva.

marquee-direction
Iwe unogonawo kusarudza hutungamiri izvo zvinyorwa zvinofanira kupona pahwindo. Izvo zvinotungamira mberi uye zvinodzokorora zvinotarisana nehutungamiri hwemashoko apo inopera-style ndiyo marquee-line uye kumusoro kana pasi apo kuwedzera-style marquee-block.

Marquee-Direction Details

overflow-style Mutungamiri Mutauro mberi reverse
marquee-line ltr ruboshwe rudyi
rtl rudyi ruboshwe
marquee-block up pasi

marquee-speed
Iyi dzimba inosarudza kuti nokukurumidza zvinyorwa zvinogadzirwa sei pahwindo. Maitiro acho anonoka, anowanzo, uye anokurumidza. Iko chaiyo inokurumidza inobva pane zvinyorwa uye shanduro ichiratidzira, asi hutano hunofanira kunge huchireruka hunonoka kudarika hutsika hunochembera kupfuura nekukurumidza.

Browser Support yeMarquee Properties

Iwe unogona kushandiswa kushandisa vhizimisi prefixes kuti uwane CSS marquee zvimwe zvinhu kuti zvishande. Izvo zvinotevera:

CSS3 Vendor Prefix
overflow-x: marquee-line; overflow-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-kudzokorora
marquee-direction: mberi | reverse; -webkit-marquee-kutungamira: mberi | kumashure;
marquee-speed -webkit-marquee-speed
hapana zvakaenzana -webkit-marquee-increment

Nzvimbo yekupedzisira inokubvumira kutsanangura kuti matanho anofanira kuve akaita sei kana kuti maduku sehuwandu hwezvinyorwa pahwindo mu marquee.

Kuti uve ne marquee yako achishanda, unofanira kuisa mutengesi prefixed tsika pakutanga uye ovatevera neCSS3 maonero ehutano. Semuenzaniso, heino CSS ye marquee iyo inopumburura mashoko acho mashanu kubva kuruboshwe kuenda kurudyi mukati mebhokisi re 200x50.

{
kureba: 200px; kureba: 50px; white-space: nowrap;
zvinoputika; zvakavigwa;
overflow-x: -webkit-marquee;
-webkit-marquee-kutungamira: mberi;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: zvakajairika;
-webkit-marquee-increment: zvishoma;
-webkit-marquee-kudzokorora: 5;
overflow-x: marquee-line;
marquee-direction: mberi;
marquee-style: scroll;
marquee-speed: zvakajairika;
marquee-play-count: 5;
}