介绍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. python 学习jieba库遇到的问题及解决方法

    昨天在课堂上学习了jieba库,跟着老师写了同样的代码时却遇到了问题: jieba分词报错AttributeError: module 'jieba' has no attribute 'cut' 文 ...

  2. 【转贴】GS464/GS464E

    GS464/GS464E GS464为四发射64位结构,采用动态流水线.其1.0版本(简称GS464)为9级流水线结构,在龙芯3A.3B.2H中使用.其2.0版本(简称GS464E)为12级动态流水线 ...

  3. 小菜鸟之java异常

    一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...

  4. Codeforces 1209D Cow and Snacks

    题目大意 有 $n$ 个不同的糖果,从 $1$ 到 $n$ 编号.有 $k$ 个客人.要用糖果招待客人. 对于每个客人,这些糖果中恰有两个是其最爱.第 $i$ 个客人最爱的糖果编号是 $x_i$ 和 ...

  5. CF 1133B Preparation for International Women's Day

    题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...

  6. FFmpeg4.0笔记:封装ffmpeg的解码功能类CDecode

    Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff CDecode.h /********************** ...

  7. 01 Redis基础

    NoSQL 学名(not only sql) 特点: 存储结构与mysql这一种关系型数据库完全不同,nosql存储的是KV形式 nosql有很多产品,都有自己的api和语法,以及业务场景 产品种类: ...

  8. 记一些云服务器上部署koa2项目遇到的问题

    云服务器系统版本centos7.2,部署的项目koa2,node版本: 10.16.0 一.pm2的一些问题 1.安装pm2: npm install -g pm2 2.建立软链接,使pm2能全局使用 ...

  9. AngularJs 初级入门 学习笔记

    刚学angular, 做一些笔记方便自己翻看. ng-app: 填写模块的名称 ng-init: 初始化数据(一般通过控制器初始化) ng-model: 填写数据模型 ng-bind: 绑定数据模型, ...

  10. 外星人电脑出现the system is running in low graphics mode的解决方法

    问题现象: 执行删除GCC5.4.0: sudo  apt-get remove gcc gcc-5重启电脑后,就显示the system is running in low graphics mod ...