ສ້າງເນື້ອຫາ Scrollable ໃນ HTML5 ແລະ CSS3 ໂດຍບໍ່ມີກາຫມາຍ

ຜູ້ທີ່ຂອງທ່ານທີ່ຂຽນ 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;
}