ຜູ້ທີ່ຂອງທ່ານທີ່ຂຽນ HTML ສໍາລັບເວລາດົນນານອາດຈະຈື່ຈໍາອົງປະກອບ. ນີ້ແມ່ນອົງປະກອບຂອງຕົວທ່ອງເວັບສະເພາະທີ່ສ້າງປ້າຍໂຄສະນາຂອງຂໍ້ຄວາມເລື່ອນພາບທົ່ວຫນ້າຈໍ. ອົງປະກອບນີ້ບໍ່ເຄີຍໄດ້ເພີ່ມ ຂໍ້ກໍານົດ HTML ແລະສະຫນັບສະຫນູນມັນແຕກຕ່າງກັນຢ່າງກວ້າງຂວາງໃນທົ່ວຕົວທ່ອງເວັບ. ປະຊາຊົນມັກມີຄວາມຄິດເຫັນທີ່ເຂັ້ມແຂງກ່ຽວກັບການນໍາໃຊ້ອົງປະກອບນີ້ - ທັງທາງບວກແລະລົບ. ແຕ່ວ່າທ່ານຮັກຫລືກຽດຊັງມັນ, ມັນບໍ່ແມ່ນຈຸດປະສົງຂອງການສ້າງເນື້ອຫາທີ່ເຕັມໄປດ້ວຍຂອບເຂດທີ່ເບິ່ງເຫັນ.
ສ່ວນຫນຶ່ງຂອງເຫດຜົນທີ່ມັນບໍ່ເຄີຍໄດ້ຮັບການປະຕິບັດຢ່າງເຕັມສ່ວນໂດຍຕົວທ່ອງເວັບ, ນອກເຫນືອຈາກຄວາມຄິດເຫັນສ່ວນຕົວທີ່ເຂັ້ມແຂງ, ມັນແມ່ນວ່າມັນຖືກພິຈາລະນາຜົນກະທົບທາງສາຍຕາແລະດັ່ງນັ້ນ, ມັນບໍ່ຄວນຈະຖືກກໍານົດໂດຍ HTML, ເຊິ່ງກໍານົດໂຄງສ້າງ. ແທນທີ່ຈະ, ຜົນກະທົບໃນຮູບພາບຫຼືການນໍາສະເຫນີຄວນຖືກຄຸ້ມຄອງໂດຍ CSS. ແລະ CSS3 ເພີ້ມໂມດູນ marquee ທີ່ຈະຄວບຄຸມວິທີການ ນໍາເອົາຜົນກະທົບຂອງ marquee ໃຫ້ອົງປະກອບ.
New CSS3 Properties
CSS3 ເພີ້ມ ຄຸນສົມບັດໃຫມ່ 5 ເພື່ອຊ່ວຍຄວບຄຸມວິທີການສະແດງເນື້ອຫາຂອງທ່ານໃນ marquee: overflow-style, marquee-style, marquee-play-count, marquee-direction and marquee-speed
overflow-style
ຊັບສົມບັດແບບລົງລ້າສຸດ (ເຊິ່ງຂ້ອຍຍັງກ່າວໃນບົດຄວາມ CSS Overflow) ກໍານົດແບບທີ່ຕ້ອງການສໍາລັບເນື້ອຫາທີ່ເຕັມໄປດ້ວຍກ່ອງຂໍ້ມູນ. ຖ້າທ່ານກໍານົດມູນຄ່າຂອງເສັ້ນຂອບຫຼື marquee-block ເນື້ອຫາຂອງທ່ານຈະເລື່ອນລົງແລະອອກໄປທາງຊ້າຍ / ຂວາ (marquee-line) ຫຼື up / down (marquee-block).
marquee-style
ຄຸນສົມບັດນີ້ກໍານົດວິທີການເນື້ອຫາຈະຍ້າຍເຂົ້າໄປເບິ່ງ (ແລະອອກ).
ຕົວເລືອກແມ່ນເລື່ອນ, ສະໄລ້ແລະສະຫລັບ. ການເລື່ອນພາບເລີ່ມຕົ້ນດ້ວຍເນື້ອຫາທີ່ຫມົດໄປຈາກຫນ້າຈໍ, ແລະຫຼັງຈາກນັ້ນມັນເຄື່ອນຍ້າຍໄປທົ່ວພື້ນທີ່ເບິ່ງເຫັນຈົນກ່ວາມັນຫມົດໄປຫມົດຈາກຫນ້າຈໍອີກເທື່ອຫນຶ່ງ. Slide ເລີ່ມຕົ້ນດ້ວຍເນື້ອຫາຫມົດໄປຈາກຫນ້າຈໍແລະຫຼັງຈາກນັ້ນມັນຍ້າຍໄປຈົນກວ່າເນື້ອຫາໄດ້ເຄື່ອນຍ້າຍຢ່າງເຕັມສ່ວນໄປສູ່ຫນ້າຈໍແລະບໍ່ມີເນື້ອຫາທີ່ເຫລືອຢູ່ໃນຫນ້າຈໍ.
ສຸດທ້າຍ, ສະລັບກັນ bounces ເນື້ອໃນຈາກຂ້າງຄຽງຂ້າງ, sliding ກັບຄືນໄປບ່ອນແລະດັງນີ້.
marquee-play-count
ຫນຶ່ງໃນຂໍ້ບົກຜ່ອງຂອງການນໍາໃຊ້ອົງປະກອບ MARQUEE ແມ່ນວ່າ marquee ບໍ່ເຄີຍຢຸດ. ແຕ່ມີຄຸນສົມບັດແບບ marquee play count ທ່ານສາມາດຕັ້ງ marquee ເພື່ອ rotate ເນື້ອໃນ on ແລະ off ສໍາລັບຈໍານວນເວລາສະເພາະໃດຫນຶ່ງ.
marquee-direction
ທ່ານຍັງສາມາດເລືອກທິດທາງທີ່ເນື້ອຫາຄວນເລື່ອນລົງເທິງຫນ້າຈໍ. ມູນຄ່າຕໍ່ຫນ້າແລະກັບຄືນມາແມ່ນອີງໃສ່ທິດທາງຂອງຂໍ້ຄວາມໃນເວລາທີ່ຄວາມກົດດັນເກີນໄປແມ່ນເສັ້ນແນວຕັ້ງແລະຂຶ້ນຫຼືລົງເມື່ອການໄຫຼລົງແບບສະຫງວນແມ່ນເປັນກຽດ.
ລາຍລະອຽດ Marquee-Direction
overflow-style | Language Direction | ໄປຂ້າງຫນ້າ | ຍ້ອນກັບ |
---|---|---|---|
marquee-line | ltr | left | right |
rtl | right | left | |
marquee-block | ຂຶ້ນ | ລົງ |
marquee-speed
ຄຸນສົມບັດນີ້ກໍານົດວິທີການເລື່ອນພາບເນື້ອຫາຢ່າງວ່ອງໄວໃນຫນ້າຈໍ. ມູນຄ່າແມ່ນຊ້າ, ປົກກະຕິແລະໄວ. ຄວາມໄວຈິງແມ່ນຂຶ້ນຢູ່ກັບເນື້ອຫາແລະຕົວທ່ອງເວັບສະແດງມັນ, ແຕ່ວ່າຄຸນຄ່າຈະຊ້າລົງແມ່ນຊ້າກວ່າປົກກະຕິເຊິ່ງຊ້າກວ່າໄວ.
ການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບຂອງຄຸນສົມບັດ Marquee
ທ່ານອາດຈໍາເປັນຕ້ອງໃຊ້ prefixes ຂອງຜູ້ຂາຍ ເພື່ອໃຫ້ໄດ້ອົງປະກອບ CSS marquee ເຮັດວຽກ. ພວກເຂົາມີດັ່ງນີ້:
CSS3 | Vendor Prefix |
---|---|
overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
marquee-style | -webkit-marquee-style |
marquee-play-count | -webkit-marquee-repeetition |
marquee direction: forward | reverse | -webkit-marquee-direction: forwards | backwards; |
marquee-speed | -webkit-marquee-speed |
ບໍ່ທຽບເທົ່າ | -webkit-marquee-increment |
ຄຸນສົມບັດສຸດທ້າຍອະນຸຍາດໃຫ້ທ່ານກໍານົດວິທີຂັ້ນຕອນຂະຫນາດໃຫຍ່ຫຼືຂະຫນາດນ້ອຍຄວນຈະເປັນການເລື່ອນພາບໃນຫນ້າຈໍໃນ marquee ໄດ້.
ເພື່ອໃຫ້ມີການເຮັດວຽກຂອງທ່ານ, ທ່ານຄວນເອົາຜູ້ຂາຍທີ່ມີ prefixed ຄ່າທໍາອິດແລະຫຼັງຈາກນັ້ນໃຫ້ຕິດຕາມພວກເຂົາດ້ວຍຄ່າເສພາະ CSS3. ຕົວຢ່າງເຊັ່ນນີ້ແມ່ນ CSS ສໍາລັບ marquee ທີ່ scrolls ຂໍ້ຄວາມຫ້າເວລາຈາກຊ້າຍຫາຂວາພາຍໃນກ່ອງ 200x50.
{
width: 200px height: 50px ພື້ນທີ່ສີຂາວ: nowrap;
overflow: hidden
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repeetition: 5;
overflow-x: marquee-line;
marquee-direction: forward
marquee style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
}