介绍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. 字符串转 Boolean 的正确方式

    String s1 = "false"; String s2 = "true"; String s3 = "fAlSe"; String s ...

  2. leveldb Arena源码分析

    前言 对于一个高性能的服务器程序来说,内存的使用非常重要.C++提供new/delete来管理内存的申请和释放,但是对于小对象来说,直接使用new/delete代价比较大,要付出额外的空间和时间,性价 ...

  3. (5.12)mysql高可用系列——复制中的在线切换GTID模式/增加节点/删除节点

    目录 [0]需求 前提,已经假设好基于传统异步复制的主库和从库1. [0.1]传统异步切换成基于GTID的无损模式 [0.2]增加特殊要求的从库 [1]操作环境 [2]构建 复制->半同步复制 ...

  4. JavaRMI框架

     RMI(即Remote Method Invoke 远程方法调用).在Java中,只要一个类extends了java.rmi.Remote接口,即可成为存在于服务器端的远程对象,供客户端访问并提供一 ...

  5. Jquery 控制table中的checkbox 相关选中事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Python多线程异步任务队列

    原文地址 python的多线程异步常用到queue和threading模块 #!/usr/bin/env python # -*- coding: UTF-8 -*- import logging i ...

  7. JS定时器的用法及示例

    JS定时器的用法及示例 目录 js 定时器的四个方法 示例一 示例二 示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...

  8. ERROR qos-server can not bind localhost:22222

    dubboe版本2.7.1 spring cloud alibaba最新官网examples 根据readme中说明文档依次启动 1.nacos,默认用户名密码nacos/nacos 2.启动spri ...

  9. linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下: chkconfig --list 可能输出如下: network         0:off   1:o ...

  10. 1.K近邻算法

    (一)K近邻算法基础 K近邻(KNN)算法优点 思想极度简单 应用数学知识少(近乎为0) 效果好 可以解释机器学习算法使用过程中的很多细节问题 更完整的刻画机器学习应用的流程 图解K近邻算法 上图是以 ...