Ang mga nasa iyo na nagsusulat ng HTML sa loob ng mahabang panahon ay maaaring matandaan ang elemento. Ito ay isang elemento na partikular sa browser na lumikha ng isang banner ng scroll text sa buong screen. Ang sangkap na ito ay hindi kailanman idinagdag sa espesipikasyon ng HTML at suporta para sa mga ito ay iba-iba nang malawak sa lahat ng mga browser. Ang mga tao ay madalas na may napakalakas na opinyon tungkol sa paggamit ng sangkap na ito - parehong positibo at negatibo. Ngunit kung iniibig mo man o kinamumuhian ito, ito ay nagsisilbi sa layunin ng paggawa ng nilalaman na umaapaw sa nakikita ng mga hangganan ng kahon.
Bahagi ng dahilan na hindi ito ganap na ipinatupad ng mga browser, bukod sa malakas na opinyon ng sarili, ay itinuturing na isang visual na epekto at dahil dito, hindi ito dapat tukuyin ng HTML, na tumutukoy sa istraktura. Sa halip, ang mga epekto ng visual o pagtatanghal ay dapat na pinamamahalaan ng CSS. At idinagdag ng CSS3 ang marquee module upang kontrolin kung paano idaragdag ng mga browser ang marquee effect sa mga elemento.
Bagong CSS3 Properties
Nagdagdag ang CSS3 ng limang bagong mga katangian upang makatulong na makontrol kung paano nagpapakita ang iyong nilalaman sa marquee: estilo ng overflow, marquee-style, marquee-play-count, marquee-direction at marquee-speed.
estilo ng overflow
Ang estilo ng overflow na ari-arian (na tinalakay din ko sa artikulong CSS Overflow) ay tumutukoy sa ginustong estilo para sa mga nilalaman na umaapaw sa kahon ng nilalaman. Kung itinakda mo ang halaga sa marquee-line o marquee-block ang iyong nilalaman ay mag-slide sa loob at labas sa kaliwa / kanan (marquee-line) o pataas / pababa (marquee-block).
istilong marquee
Tinutukoy ng property na ito kung paano lumilitaw ang nilalaman (at out).
Ang mga pagpipilian ay mag-scroll, slide at kahaliling. Ang pag-scroll ay nagsisimula sa ganap na pag-off sa nilalaman, at pagkatapos ay gumagalaw ito sa nakikitang lugar hanggang sa muli itong muli sa lahat ng screen. Ang slide ay nagsisimula sa ganap na pag-off sa nilalaman at pagkatapos ay lumilipat ito hanggang sa ganap na inilipat ang nilalaman sa screen at wala nang nilalaman na natitira upang i-slide sa screen.
Panghuli, ang mga alternatibong bounce ang nilalaman mula sa gilid sa gilid, pag-slide pabalik-balik.
bilang ng marquee-play-count
Ang isa sa mga kakulangan ng paggamit ng elemento ng MARQUEE ay ang taluktok ay hindi hihinto. Ngunit sa estilo ng marquee-play-count ng estilo maaari mong itakda ang marquee upang i-rotate ang nilalaman sa at off para sa isang tiyak na bilang ng beses.
direksyon ng marquee
Maaari mo ring piliin ang direksyon na dapat mag-scroll sa nilalaman sa screen. Ang mga halaga ng pasulong at baligtarin ay batay sa direksyon ng teksto kapag ang overflow-style ay marquee-line at pataas o pababa kapag ang overflow-style ay marquee-block.
Detalye ng Marquee-Direction
| estilo ng overflow | Direksyon ng Wika | pasulong | baligtarin |
|---|---|---|---|
| marquee-line | ltr | kaliwa | tama |
| rtl | tama | kaliwa | |
| marquee-block | up | pababa |
bilis ng marquee
Tinutukoy ng property na ito kung gaano kabilis ang pag-scroll ng nilalaman sa screen. Ang mga halaga ay mabagal, normal, at mabilis. Ang aktwal na bilis ay nakasalalay sa nilalaman at ang browser na nagpapakita nito, ngunit ang mga halaga ay dapat na mabagal ay mas mabagal kaysa sa normal na mas mabagal kaysa mabilis.
Suporta sa Browser ng Marquee Properties
Maaaring kailanganin mong gamitin ang prefix ng vendor upang makuha ang mga elemento ng marquee ng CSS upang gumana. Ang mga ito ay ang mga sumusunod:
| CSS3 | Vendor Prefix |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| istilong marquee | -webkit-marquee-style |
| bilang ng marquee-play-count | -webkit-marquee-repetition |
| direksyon ng marquee: forward | reverse; | -webkit-marquee-direction: forward | backwards; |
| bilis ng marquee | -webkit-marquee-speed |
| walang katumbas | -webkit-marquee-increment |
Ang huling ari-arian ay nagbibigay-daan sa iyo upang tukuyin kung gaano kalaki o maliit ang mga hakbang ay dapat na bilang mga scroll ng nilalaman sa screen sa marquee.
Upang magtrabaho ang iyong marquee, dapat mong ilagay muna ang prefix na mga halaga ng vendor at pagkatapos ay sundin ang mga ito gamit ang mga halaga ng pagtutukoy ng CSS3. Halimbawa, dito ay ang CSS para sa isang marquee na nag-scroll sa teksto ng limang beses mula sa kaliwa papunta sa loob ng isang 200x50 na kahon.
{
lapad: 200px; taas: 50px; white-space: nowrap;
overflow: nakatago;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: pasulong;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: maliit;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
direksyon ng marquee: pasulong;
Marquee-style: scroll;
bilis ng marquee: normal;
marquee-play-count: 5;
}