美丽潮流_美丽大方的潮流资讯平台
您当前的位置 : 美丽潮流  >  资讯
实现文字逐条滚动效果的方式!
2021-02-14 06:40:34 来源:互联网 阅读:-

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

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

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

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

推荐阅读:中国知创网

频道推荐
  • 2021中国少儿模特大会形象推广大使-赵钧洋
    2021中国少儿模特大会形象推广大使-赵钧洋

    据悉, 2021中国少儿模特大会是由全国百家童模机构联合打造,时尚界大咖、知名童装设计师、影视制片人等倾城加盟的顶级盛会。大会致力于打造最耀眼的未来之星,用最专...

    2021-01-22
  • 2021中国少儿模特大会形象推广大使-李佳沐歌
    2021中国少儿模特大会形象推广大使-李佳沐

    清爽的头发,清秀的脸庞,清澈的眼眸,还有那由内而外散发出的清新自然的气息,绘成一幅清美的画卷。凤眉明眸,顾盼流离间皆是气质。李佳沐歌是属于舞台的姑娘,站上舞台的...

    2021-01-21
  • 西装太正式?双排扣也能轻松优雅
    西装太正式?双排扣也能轻松优雅

    相比简洁轻松的的单排扣(特别是现在常见的两扣、3-roll-2),双排扣西装在国内似乎不那么受待见。基本除了一票绅装爱好者和时髦精之外,平日街上是挺难看到穿着双...

    2020-02-26
  • 唇膏不只是用来擦嘴的,竟然有这么多的妙用
    唇膏不只是用来擦嘴的,竟然有这么多的妙用

    小身材大用处,唇膏的这些妙用你造吗?相信每个女孩的包里,都少不了一支润唇膏,有的小伙伴甚至有N支。有些可能只用几次就闲置了,还有些时间久了唇膏过期了也不能用了。...

    2020-02-26
  • 这些鞋子都是适合春天穿的,可以搭配牛仔裤和小裙子
    这些鞋子都是适合春天穿的,可以搭配牛仔裤和小

    初春单鞋|百元内平价学生党仙女单鞋你不得不知道的仙女单鞋这些鞋子都是适合春天穿的 可以搭配牛仔裤和小裙子性价比也都挺高的 所以学生党上班族都可喜欢的朋友们可以帮...

    2020-02-26
  • 判断你的穿搭是“高级感”还是“俗气感”,看这3点区别,很明了
    判断你的穿搭是“高级感”还是“俗气感”,看这

    每个女人都爱买衣服爱打扮自己,但是花同样的钱呈现的效果可能大相径庭。当然这并非是因为外貌的原因,几乎所有女孩子都可以靠化妆变身气质小美女,但是有好衣品,看起来就...

    2020-02-26