HTML5 болон CSS3-д Scrollable Content-ийг бий болгох нь MARQUEE-ийг ашигладаггүй

HTML- г удаан хугацааны туршид бичиж байсан хүмүүс элементийг санах болно. Энэ нь дэлгэцээр гүйлгэх текстийг үүсгэсэн хөтөч-тусгай элемент байв. Энэ элемент нь HTML тодорхойлолтонд хэзээ ч нэмэгдэхгүй бөгөөд түүнд зориулсан дэмжлэгийг янз бүрийн хөтчүүдийг хамарсан. Хүмүүс энэ элементийг эерэг ба сөрөг аль алиных нь хэрэглээний талаар маш хүчтэй санал бодолтой байв. Гэхдээ та хайртай, үзэн ядаж байгаа эсэхээ үзээд хайрцагны хил хязгаарыг харуулсан контент гаргах зорилготой байсан.

Хөдөлгөөнгүй хөтөч нь хүний ​​хувийн үзэл бодлоос гадна түүний бүрэн гүйцэд хэрэгжиж байгаагүй шалтгаан нь харааны нөлөө гэж үздэг бөгөөд ингэснээр бүтэцийг тодорхойлдог HTML-ээр тодорхойлогдох ёсгүй юм. Үүний оронд харааны эсвэл илтгэлийн үр нөлөөг CSS-ээр удирдана. CSS3 нь marquee модулийг нэмж , хөтчүүд хэрхэн элементүүдийг элементүүдэд хэрхэн нэмэхийг хянадаг.

Шинэ CSS3 Properties

CSS3 нь таны контент хэр олон харагддагийг хянахын тулд 5 шинэ шинж чанарыг нэмдэг: overflow style, marquee-style, marquee-play-count, marquee-direction болон marquee-speed.

overflow-style
Overflow style property (Би CSS-ийн Overflow нийтлэлд мөн хэлэлцсэн) контентийн хайрцгийг гүйцэд дүүргэсэн контентуудын давуу талыг тодорхойлдог. Хэрэв та marquee-line буюу marquee-block гэсэн утгыг тохируулсан бол таны агуулга зүүн / баруун талд (marquee-line) эсвэл дээш / доош гулсуулна (marquee-block).

Marquee-style
Энэ өмч нь агуулга хэрхэн харагдах (болон гарч) шилждэгийг тодорхойлно.

Сонголтууд нь гүйлгэх, слайд болон өөр сонголтууд юм. Scroll нь дэлгэцэн дээр гарч ирсэн контентоос эхэлж, дараа нь харагдах дэлгэц хүртэл бүгд харагдана. Слайд нь дэлгэцэн дээр гарч буй контентоос эхэлж, контент нь дэлгэцэн дээр бүрэн шилжих хүртэл нүүлгэн шилжиж, дэлгэц дээр гулсуулах үлдсэн агуулга байхгүй болно.

Эцэст нь, өөр нэг хувилбар нь агуулгыг онгойлгож, урагшаа урагшлуулна.

marquee-play-count
MARQUEE элементийг ашиглах сул талуудын нэг нь эндүүрэл хэзээ ч зогсохгүй юм. Гэхдээ стилийн үл хөдлөх хөрөнгийн тоог тооцоолоход та marquee-г тохируулахын тулд агуулгыг эргүүлж, тодорхой тооны удаа эргүүлэх боломжтой.

marquee-direction
Та агуулгыг дэлгэц дээр гүйлгэх чиглэлийг сонгож болно. Урагшлах болон урвуу утгууд нь текстийн чиглэлээс хамааран overflow-style нь marquee-line ба overflow-style нь marquee-block-тэй үед дээш эсвэл доош.

Marquee-Direction Details

overflow-style Хэлний чиглэл урагшлах урвуу
marquee-line ltr үлдсэн баруун
rtl баруун үлдсэн
marquee-block дээшээ доошоо

marquee-speed
Энэ өмч нь агуулгын гүйлгээг хэр хурдан гүйлгэж байгааг тодорхойлдог. Утга нь удаан, хэвийн, хурдан байдаг. Бодит хурд нь контентоос хамаардаг ба браузер үүнийг харуулдаг, гэхдээ утгууд нь хэвийн хэмжээнээс удаан байдаг нь хурдан байхаас илүү удаан байдаг.

Marquee Properties програмыг дэмждэг

Та CSS marquee элементүүдийг ажиллуулахын тулд үйлдвэрлэгчийн угтварыг ашиглах хэрэгтэй байж магадгүй. Тэдгээр нь:

CSS3 Эзэмшигч нь
overflow-x: marquee-line; overflow-x: -webkit-marquee;
Marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-давталт
marquee-direction: forward | урвуу; -webkit-marquee-direction: урагшаа | backward;
marquee-speed -webkit-marquee-speed
ижил биш байна -webkit-marquee-increment

Сүүлчийн шинж чанар нь marquee дахь дэлгэцэн дэх агуулгыг гүйлгэх үед том, жижиг хэдэн алхмуудыг тодорхойлохыг танд зөвшөөрдөг.

Та нарыг ажиллуулахын тулд эхлээд үйлдвэрлэгчийн prefixed утгуудыг байрлуулж дараа нь тэдгээрийг CSS3 техникийн утгын дагуу дагаж мөрдөх хэрэгтэй. Жишээлбэл, текстийг 200x50 хайрцаг дотор зүүнээс баруун тийш таван удаа текстийг хуулж авдаг.

{
өргөн: 200px; өндөр: 50px; цагаан орон зай: nowrap;
халих: нуугдмал;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: урагшлуулах;
-webkit-marquee-style: гүйлгэх;
-webkit-marquee-speed: хэвийн;
-webkit-marquee-increment: жижиг;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: урагшлах;
Marquee-style: scroll;
marquee-speed: хэвийн;
marquee-play-count: 5;
}