介绍HTML设置滚动文字marquee的相关属性

㈠文字滚动标签

设置文字滚动使用<marquee></marquee>标签,可以再标签里面设置字体的颜色,字号,字体大小等。
 
㈡滚动方向属性——direction

⑴代码写法:<marquee  direction="滚动方向">滚动文字</marquee>

⑵ “滚动方向取值”:up、down、left  和  right,其中向左滚动  left  的效果和默认效果相同。

㈢滚动方式属性——behavior

⑴ 代码写法:<marquee  behavior="滚动方式">滚动文字</marquee>

⑵取值
①默认为scroll,即循环滚动。
②当其值为alternate时,内容将来回循环滚动。
③当其值为slide时,内容滚动一次即停止,不会循环。
④ 还有一个loop属性,可设置其滚动循环次数,值是正整数,默认为无限循环。
 

㈣滚动速度属性——scrollamount

⑴代码写法: <marquee   scrollamount="滚动速度">滚动文字</marquee>

⑵在该语法中,滚动文字的速度实际上是设置滚动文字每次移动的长度,以像素为单位。scrollamount表示运动速度,值是正整数,默认为6。

㈤  滚动延迟属性——scrolldelay

⑴代码写法:<marquee  scrolldelay="时间间隔">滚动文字</marquee>

⑵ scrolldelay表示停顿时间,值是正整数,默认为0, 时间间隔单位是毫秒(千分之一秒)

㈥ 滚动范围属性——width、height

⑴代码写法:   <marquee  width=""  height="">滚动文字</marquee>

⑵如果不设置滚动背景的面积,那么默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用  width  和  height  参数调整其水平和垂直的范围。width 属性用于设置内容滚动背景宽度。标签的height属性用于设置内容滚动背景高度。值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度。

㈦滚动背景颜色属性——bgcolor

⑴代码写法:<marquee  bgcolor="颜色代码">滚动文字</marquee>

⑵bgcolor表示运动区域的背景色,值是16进制的RGB颜色,默认为白色

㈧ 滚动空间属性——hspace、vspace

⑴代码写法:<marquee  hspace="水平范围"  vspace="垂直范围">滚动文字</marquee>

⑵ hspace、vspace表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。。

㈨元素的垂直对齐方式——align

值可以是top,middle,bottom,默认为middle

㈩鼠标滑动

⑴代码写法:onmouseover=this.stop() onmouseout=this.start()

⑵表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

   希望有所帮助。

参考:时光·漫步zth :https://blog.csdn.net/qq_41573234/article/details/80313714

marquee跑马灯效果的相关属性的更多相关文章

  1. TextView: android:ellipsize="marquee" 跑马灯效果无效的问题

    今天练习的时候想实现一个文字的跑马灯效果,本来想自己手动实现的,不过突然想起来android里的TextView属性似乎自带了这个效果,叫: android:ellipsize ,平时都是把它的属性值 ...

  2. 自定义有焦点的TextView实现广告信息左右一直滚动的跑马灯效果

    import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; imp ...

  3. 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题

    说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...

  4. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  5. TextView标签的属性和跑马灯效果

    text:显示的内容 textSize:文本的大小 textColor:文本的颜色 visibility:可见性  默认可见,invisible:表示不可见,但对控件的显示区域做了保留 gone:隐藏 ...

  6. android:ellipsize实现跑马灯效果总结(转)

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  7. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  8. android:ellipsize实现跑马灯效果总结

    最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说都是 ...

  9. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

随机推荐

  1. Windows系统中CMD wmic查看硬盘、内存、CPU、BIOS、网卡等信息。(附带脚本)

    目录 Windows系统中CMD wmic查看硬盘.内存.CPU.BIOS.网卡等信息. 查看内存相关 查看内存主板数量(两条命令均可) 查看物理内存 查看逻辑内存 查看缓存 查看虚拟内存 查看网络相 ...

  2. 10分钟学会web通讯的四种方式,短轮询、长轮询(comet)、长连接(SSE)、WebSocket

    一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...

  3. 针对yarn的8088端口攻击

    参考: https://www.wangbokun.com/%E8%BF%90%E7%BB%B4/2019/09/02/%E6%8C%96%E7%9F%BF%E7%97%85%E6%AF%92.htm ...

  4. java 给不同成绩分等级

    题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. 程序分析:(a>b)?a:b这是条件运算符的基本例子. pack ...

  5. [转帖]Java 8新特性探究(九)跟OOM:Permgen说再见吧

    Java 8新特性探究(九)跟OOM:Permgen说再见吧 https://my.oschina.net/benhaile/blog/214159 need study 很多开发者都在其系统中见过“ ...

  6. 查找担保圈-step2-拆分成员表函数

    USE [test] GO /****** Object: UserDefinedFunction [dbo].[tf_split_char] Script Date: 2019/7/8 14:39: ...

  7. delphi 连接各中数据库方法

    ---恢复内容开始--- 数据库连接字符串的拼写规则的决定条件: • 连接的数据库的类型:SQL Server,Oracle,MySQL,Acess,MogoDB,Visual FoxPro(dBAS ...

  8. ITCAST-C# 委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace _12委 ...

  9. 三剑客-sed(简写)

    打印操作:n命令所有行打印,第二行打印两遍 sed '2p' passwd只打印第二行sed -n '2p' passwd打印1~3行 sed -n '1,3p' passwd 打印带有'root'的 ...

  10. shell 脚本中的入参获取与判断

    1.获取shell脚本的入参个数: $# 2.获取shell脚本的第n个入参的字符个数/字符串长度(注意这里的n需要替换为具体的数字,如果这个数字超过实际的入参个数,结果为0): ${#n}