cssw3school(cssw3学校)

  公告或者新闻动态文字时隔几秒向下翻滚效果在很多企业网站中能遇到,今天我们就来用多种做法实现该效果!  一、mar...

  公告或者新闻动态文字时隔几秒向下翻滚效果在很多企业网站中能遇到 ,今天我们就来用多种做法实现该效果!

  一 、marquee 标签做法

  建立第一个滚动字幕。代码:

  效果:

  字幕向右滚动,当鼠标移上去时候,字幕暂停移动 ,鼠标离开后,字幕继续往右的动作

  onMouseOut="this.start()";用来设置鼠标移除出区域时继续滚动;

  onMouseOver=“this.stop()”;用来设置鼠标移入该区域时停止滚动.

  scrollamount:表示速度,值越大速度越快 ,默认为6 建议1-3比较好

  width和height: 表示滚动区域的大小,一般在做垂直滚动的时候, 一定要设height的值 。

cssw3school(cssw3学校)

  direction:表示滚动的方向 ,默认为向左。可选的值有 right(向右)、down(向下)、 up(向上)

  scrolldelay:也是用来控制速度的 ,默认为90 值越大速度越慢,通常不需要设置

  behavior:用来控制属性,默认为循环滚动 ,可选的值为 alternate(交替滚动) 、slide(滚动一次,然后停止滚动)

  二、JS实现无缝滚动文字

  html:

  css:

cssw3school(cssw3学校)

  js:

本文来自作者[恭喜发财]投稿,不代表华智号立场,如若转载,请注明出处:https://www.bjxhzyykj.cn/miao/10246.html

赞 (2)

文章推荐

发表回复

本站作者才能评论

评论列表(4条)

  • 恭喜发财
    恭喜发财 2026-10-17

    我是华智号的签约作者“恭喜发财”!

  • 恭喜发财
    恭喜发财 2026-10-17

    希望本篇文章《cssw3school(cssw3学校)》能对你有所帮助!

  • 恭喜发财
    恭喜发财 2026-10-17

    本站[华智号]内容主要涵盖:华智号,生活百科,小常识,生活小窍门,百科大全,经验网

  • 恭喜发财
    恭喜发财 2026-10-17

    本文概览:  公告或者新闻动态文字时隔几秒向下翻滚效果在很多企业网站中能遇到,今天我们就来用多种做法实现该效果!  一、mar...

    联系我们

    邮件:华智网络@sina.com

    工作时间:周一至周五,9:30-18:30,节假日休息

    关注我们