[vc_row][vc_column][woodmart_title align=”left” tag=”h2″ woodmart_css_id=”649648e841c71″ title=”方法1：用HTML标签 – Marquees” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDhlODQxYzcxIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGl0bGUiLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==”][woodmart_text_block woodmart_css_id=”6495b4fbdc8c9″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk1YjRmYmRjOGM5Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]HTML Marquee标签可以实现文字滚动效果,产生动态的效果。
Marquee标签在HTML 5中已经废弃,但是在较低版本的浏览器中仍然有效。[/woodmart_text_block][woodmart_title align=”left” tag=”h3″ woodmart_css_id=”64964411ea954″ title=”Marquee标签语法” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDQxMWVhOTU0Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGl0bGUiLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==”][woodmart_text_block woodmart_css_id=”6496436205e9b” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDM2MjA1ZTliIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]
<marquee>滚动的文字</marquee>
[/woodmart_text_block][woodmart_text_block woodmart_css_id=”64964311b8ea8″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDMxMWI4ZWE4Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]
使用方向属性来指定滚动方向:
direction=”up” 向上滚动
direction=”down” 向下滚动
direction=”left” 向左滚动
direction=”right” 向右滚动
使用scrollamount属性来控制滚动的速度:
scrollamount=”数字” 数字越大速度越快
使用loop属性来设置滚动循环的次数:
loop=”数字” 数字为-1时表示无限循环[/woodmart_text_block][woodmart_title align=”left” tag=”h3″ woodmart_css_id=”6496443d24672″ title=”Marquee使用示例” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDQzZDI0NjcyIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGl0bGUiLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==”][woodmart_text_block woodmart_css_id=”64964453eb345″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDQ1M2ViMzQ1Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]
<marquee>这个文字会无限循环向左滚动</marquee>
[/woodmart_text_block][vc_raw_html]JTNDbWFycXVlZSUzRSVFOCVCRiU5OSVFNCVCOCVBQSVFNiU5NiU4NyVFNSVBRCU5NyVFNCVCQyU5QSVFNiU5NyVBMCVFOSU5OSU5MCVFNSVCRSVBQSVFNyU4RSVBRiVFNSU5MCU5MSVFNSVCNyVBNiVFNiVCQiU5QSVFNSU4QSVBOCUzQyUyRm1hcnF1ZWUlM0U=[/vc_raw_html][woodmart_text_block woodmart_css_id=”6498165090e46″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk4MTY1MDkwZTQ2Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no” woodmart_empty_space=””]
<marquee direction="up" scrollamount="1">这个文字会以较慢的速度向上滚动</marquee>
[/woodmart_text_block][vc_raw_html]JTNDbWFycXVlZSUyMGRpcmVjdGlvbiUzRCUyMnVwJTIyJTIwc2Nyb2xsYW1vdW50JTNEJTIyMSUyMiUzRSVFOCVCRiU5OSVFNCVCOCVBQSVFNiU5NiU4NyVFNSVBRCU5NyVFNCVCQyU5QSVFNCVCQiVBNSVFOCVCRSU4MyVFNiU4NSVBMiVFNyU5QSU4NCVFOSU4MCU5RiVFNSVCQSVBNiVFNSU5MCU5MSVFNCVCOCU4QSVFNiVCQiU5QSVFNSU4QSVBOCUzQyUyRm1hcnF1ZWUlM0UlQzIlQTA=[/vc_raw_html][woodmart_text_block woodmart_css_id=”6498166094c8d” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk4MTY2MDk0YzhkIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no” woodmart_empty_space=””]
<marquee loop="3">这个文字会滚动3次</marquee>
[/woodmart_text_block][vc_raw_html]JTNDbWFycXVlZSUyMGxvb3AlM0QlMjIzJTIyJTNFJUU4JUJGJTk5JUU0JUI4JUFBJUU2JTk2JTg3JUU1JUFEJTk3JUU0JUJDJTlBJUU2JUJCJTlBJUU1JThBJUE4MyVFNiVBQyVBMSUzQyUyRm1hcnF1ZWUlM0U=[/vc_raw_html][woodmart_text_block woodmart_css_id=”649648722d8ed” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDg3MjJkOGVkIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]Marquee标签可以简单实现文字滚动效果,但是在HTML 5中已被废弃,不建议使用。
可以使用JavaScript和CSS3实现更强大和标准的滚动效果。[/woodmart_text_block][/vc_column][/vc_row][vc_row][vc_column][woodmart_title align=”left” tag=”h2″ woodmart_css_id=”649648c919340″ title=”方法2：用CSS制作” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDhjOTE5MzQwIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGl0bGUiLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==”][woodmart_text_block woodmart_css_id=”6498166ab72e3″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk4MTY2YWI3MmUzIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no” woodmart_empty_space=””]
<div class="scroll-container"><div class="scroll-text">这里是文本滚动.<div> </div>
[/woodmart_text_block][woodmart_text_block woodmart_css_id=”64964b5418f3f” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NGI1NDE4ZjNmIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]
.scroll-container {
border: 3px solid black;
border-radius: 5px;
overflow: hidden;
}
.scroll-text {
/* animation properties */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: my-animation 15s linear infinite;
-webkit-animation: my-animation 15s linear infinite;
animation: my-animation 15s linear infinite;
}
/* for Firefox */
@-moz-keyframes my-animation {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(-100%); }
}
/* for Chrome */
@-webkit-keyframes my-animation {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(-100%); }
}
@keyframes my-animation {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
[/woodmart_text_block][/vc_column][/vc_row][vc_row][vc_column el_class=”scroll-container” woodmart_css_id=”64964a7c7f86a” parallax_scroll=”no” woodmart_sticky_column=”false” wd_collapsible_content_switcher=”no” wd_column_role_offcanvas_desktop=”no” wd_column_role_offcanvas_tablet=”no” wd_column_role_offcanvas_mobile=”no” wd_column_role_content_desktop=”no” wd_column_role_content_tablet=”no” wd_column_role_content_mobile=”no” mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_box_shadow=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NGE3YzdmODZhIiwic2hvcnRjb2RlIjoidmNfY29sdW1uIiwiZGF0YSI6eyJ0YWJsZXQiOnt9LCJtb2JpbGUiOnt9fX0=” mobile_reset_margin=”no” tablet_reset_margin=”no” wd_z_index=”no”][woodmart_text_block woodmart_css_id=”649649ec49f82″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NDk2NDllYzQ5ZjgyIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” extra_classes=”scroll-text” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]这里是文本滚动的示例…..[/woodmart_text_block][/vc_column][/vc_row]
