介绍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. C++调用windowsAPI实现目录zip压缩

    TCHAR zipname[] = "C:\\bcel"; TCHAR zipfile [FILENAME_MAX]; sprintf(zipfile, "%s.zip& ...

  2. 设计模式在 Spring 框架中的良好应用

    在开始正文之前,请你先思考几个问题: 你项目中有使用哪些 GOF 设计模式 说一说 GOF 23 种设计模式的设计理念 说说 Spring 框架中如何实现设计模式 假设我是面试官问起了你这些面试题,你 ...

  3. Java代码 简单用于处理和数据库相关的操作

    package util; import org.apache.commons.beanutils.BeanUtils; import java.lang.reflect.InvocationTarg ...

  4. 第一次编译ffmpeg

    今天开始玩ffmpeg了. 从官网下载来的压缩包,不会编译诶,于是我开始研究起来了. 下面就是实时记录的随笔: 首先是从官网下载来的ffmpeg,就是下面这个版本,目前的最新版吧. http://ff ...

  5. CSS3点击波浪按钮特效

    在线演示 本地下载

  6. 一、程序安全-SQL注入漏洞

    先新建MYDB.MDF,表MyUser: 测试页面: 一.利用报错获取信息 操作:按姓名精确查询,在输入框输入:小卫' and 1=db_name()/0 and '1'='1执行语句:select ...

  7. easyui在table单元格中添加进度条

    function XR_jd(alue, rowData, rowIndex){ var value; ...... var htmlstr = '<div class="easyui ...

  8. django用户投票系统详解

    投票系统之详解 1.创建项目(mysite)与应用(polls) django-admin.py startproject mysite python manage.py startapp polls ...

  9. python文件操作-1.将PDF转成Excel

    # https://www.jianshu.com/p/f33233e4c712 import pdfplumber # 为了操作PDF from openpyxl import Workbook w ...

  10. 读《JavaScript面向对象编程指南》(二)

    第五章 原型 在JavaScript中,所有函数都会拥有一个 prototype 的属性,默认初始值为空对象. 可以在相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象 ...