marquee的基本语法:<marquee> … </marquee>,与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间。而且它自己可以实现鼠标悬停的效果,下面解释一下各参数的含义:

align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。

Bgcolor:用于设定活动字幕的背景颜色,可以使用英文的单词也可以是十六进制数的。

Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。

Behavior:用于设定滚动的方式,主要由三种方式:

behavior=”scroll”表示由一端滚动到另一端;

behavior=”slide”:表示由一端快速滑动到另一端,且不再重复;

behavior=”alternate”表示在两端之间来回滚动。

Height:用于设定滚动字幕的高度。

Width:则设定滚动字幕的宽度。

Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。

Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越快。

scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。

Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。其中默认情况是向左滚动无限次,字幕高度是文本高度;滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

onmouseover: 用于设定鼠标移动到marquee块上执行的操作。

onmouseout: 用于设定鼠标从marquee块上移出后执行的操作。

闲话不说,举个例子:

<marquee> 啦啦啦,真的会动耶!</marquee>

啦啦啦,真的会动耶!

瞧,简单吧?不过,以上例子只是使用了marquee的默认用法。我们加入相应的参数,它的移动方法就有所不同了。

参数一:direction

direction的英文意思就是方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。

例:<marquee direction=up>向上移动</marquee>

向上移动

参数二:behavior

移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

例:<marquee direction=left behavior=alternate>哈哈,我来回走!</marquee>

哈哈,我来回走!

<marquee direction=left behavior=slide>累!我只走一次!</marquee>

vior=slide>累!我只走一次!

参数三:loop

循环。若未指定则循环不止(infinite),其值取数值。例:

<marquee loop=3>我只走三次哦</marquee>

我只走三次哦

参数四:scrollamount

移动速度。值取正整数。数值越大,速度越快。例:

<marquee scrollamount=25>看,我走多快!</marquee>

看,我走多快!

参数五:scrolldelay

延时。数值。例:

<marquee scrolldelay=1000>我走一走,停一停</marquee>

我走一走,停一停

参数六:bgcolor

底色。例:<marquee bgcolor=pink>看到了吧?有底色!</marquee>

看到了吧?有底色!

参数七:width和height

就是移动的宽度与高度了。例:

<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动!</marquee>

这个面积不够我移动!

其他参数:

空白(Margins)<hspace=数值 vspace=数值>

对齐方式(Align) <align=top/ middle/bottom>

最后在介绍一个鼠标悬停的效果

CSS字幕滚动 !!!的更多相关文章

  1. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  2. html中的字幕滚动marquee属性

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签. 语法: <marq ...

  3. HTML+CSS页面滚动效果处理

    HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  4. touch-action css属性 滚动和缩放手势

    CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动,缩放等) 默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理.该属性用于 ...

  5. 使用纯 CSS 实现滚动阴影效果

    开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...

  6. css 上下滚动效果

    <html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:2 ...

  7. js css 构建滚动边框

    注:预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接. 完整代码 <!DOCTYPE html> <html xmlns="http://www.w3. ...

  8. css动画+滚动的+飞舞的小球

    源代码如下: <!DOCTYPE html><html><head> <title>xi</title> <meta charset= ...

  9. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

随机推荐

  1. HCNP学习笔记之子网划分 VLSM CIDR

    子网划分.VLSM可变长子网掩码.CIDR无类域间路由是学习网络知识或者说是学习路由知识所必备的,但很多朋友说这三者理论性太强了,不好掌握.本文将结合实例讲解子网划分的方法并对VLSM和CIDR进行简 ...

  2. RabbitMQ学习之(三)_Centos6下RabbitMQ PHP扩展的安装

    安装rabbitmq-c依赖包 yum install libtool autoconf 下载安装rabbitmq-c wget https://github.com/alanxz/rabbitmq- ...

  3. linux堆栈

    linux堆栈 进 程(执行的程序)会占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途 不一而不尽相同,有些内存是事先静态 ...

  4. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  5. vs LNK2019 无法解析的外部符号 ***,该符号在函数 WinMain 中被引用

    一般链接错误都是因为包含头文件与lib库不匹配(无导出函数.lib库的release debug版本混乱.库引用的优先级.编译器设置mt/mtd等等)造成的. 错误    LNK2019    无法解 ...

  6. KALI LINUX系统初始化配置

    1.Kali Linux安装VirtualBox增强功能 VirtualBox增强功能介绍:物理机与虚拟机之间的文件共享.物理机与虚拟机之间的剪切板共享.虚拟机的direct3D支持,这样虚拟机窗口就 ...

  7. Linux系统巡检项目

    系统检测 1.检查系统类型 2.检查发行版本 3.检查内核版本 4.检查主机名称 5.检查是否启用SElinux 6.检测默认的语言/编码 7.检测uptime 8.检测最后启动时间等 CPU检查 1 ...

  8. ConcurrentHashMap实现线程安全的原理

    并发环境下为什么使用ConcurrentHashMap 1. HashMap在高并发的环境下,执行put操作会导致HashMap的Entry链表形成环形数据结构,从而导致Entry的next节点始终不 ...

  9. 2017 ACM/ICPC Asia 南宁区 L The Heaviest Non-decreasing Subsequence Problem

    2017-09-24 20:15:22 writer:pprp 题目链接:https://nanti.jisuanke.com/t/17319 题意:给你一串数,给你一个处理方法,确定出这串数的权值, ...

  10. 北京联通光猫 F427 路由改桥接的方法

    最近安装了一个联通的宽带,赠送的光猫是 中兴 F427,然后联通小哥给安装的时候,直接开启了光猫的路由功能. 不过联通这个光猫实在是太弱了,起码默认的帐号开启的功能实在是太弱了,没法完成以下几个功能: ...