您的位置: 消费周刊网 > 科技 > 正文

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

2021-02-14 04:22:10来源:阅读:

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

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

一、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:

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

推荐阅读:北京热线

滚动推荐
22:10实现文字逐条滚动效果的方式!
公告或者新闻动态文字时隔几秒向下翻滚效果在很多企业网站中能遇到,今天我[详细]
10:49如何处理进水手机最靠谱?!
在英剧《天堂岛疑云》第一季中,警方从海里打捞出一具尸体,经过搜寻,找到[详细]
01:09苹果手机耗电快,那是因为你没关闭这
用过iPhone手机的都知道,电量真的是随随便便就哗哗往下掉,有时候几[详细]
23:44LG V60 ThinQ旗舰手机发
Hello大家好,这里是「科技V报」,我是龙二, 近日,vivo方面放[详细]
14:06100%全面屏!索尼Xpera10
近日,有网友曝光了日本工业设计师最新设计的索尼Xpera10概念图。极[详细]
11:03联想 Z6 Pro 体验:一台更主
令很多人不敢相信的是,在一些厂商还没有发布骁龙855机型的当下,联想已[详细]
09:07战神Z7-KP7S1主打1060独
一般真正的游戏发烧友或者把游戏当做自己职业的朋友,会在挑选游戏笔记本电[详细]