无缝上下滚动代码(无缝滚动原理)

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

  一、marquee 标签做法

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

  效果:

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

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

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

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

无缝上下滚动代码(无缝滚动原理),无缝上下滚动代码(无缝滚动原理),无缝上下滚动代码,html,企业网站,第1张

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

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

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

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

  二、JS实现无缝滚动文字

  html:

  css:

  js:

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 无缝上下滚动代码(无缝滚动原理)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论