您的位置: 天津都市网 > 企业 > 正文

实现文字逐条滚动效果的方式

2020-07-28 11:06:53来源:阅读:-

实现文字逐条滚动效果的方式

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

一、marquee 标签做法

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

实现文字逐条滚动效果的方式

效果:

实现文字逐条滚动效果的方式

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

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

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

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

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

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

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

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

二、JS实现无缝滚动文字

html:

实现文字逐条滚动效果的方式

css:

实现文字逐条滚动效果的方式

js:

实现文字逐条滚动效果的方式

推荐阅读:红米1s

滚动推荐
06:53实现文字逐条滚动效果的方式
公告或者新闻动态文字时隔几秒向下翻滚效果在很多企业网站中能遇到,今天我[详细]
35:15从手机工厂看印度智能机:边追赶边向
在印度以外,Intex这个手机品牌相信没有太大知名度。实际上,就算在印[详细]
30:50苹果继续优化iOS 13中的“慢充
但苹果为了保护电池,反其道而行之,在iOS13中为iPhone加入了一[详细]
37:06投资风格灵活,精准控制回撤——刘润
各大私募基金的核心人物,大家之前可能对他们还不太了解,毕竟在市场上的名[详细]
18:11iPhone 更换电池后自动重启是
有一份新的调查表明,普通用户平均每隔四年才升级一次iPhone,所以不[详细]
15:43单凭一块4K OLED屏,战神Z7
随着《微微一笑很倾城》、《亲爱的,热爱的》、《全职高手》的热播,可令更[详细]
14:56家庭NAS入门首选:DNS-320
近些年网上大把免费的公众云存储空间为大家日常生活中数据的存储、分享提供[详细]