CSS字幕滚动 !!!
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>
参数三: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字幕滚动 !!!的更多相关文章
- CSS 实现滚动进度条效果
参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...
- html中的字幕滚动marquee属性
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签. 语法: <marq ...
- HTML+CSS页面滚动效果处理
HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- touch-action css属性 滚动和缩放手势
CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动,缩放等) 默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理.该属性用于 ...
- 使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...
- css 上下滚动效果
<html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:2 ...
- js css 构建滚动边框
注:预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接. 完整代码 <!DOCTYPE html> <html xmlns="http://www.w3. ...
- css动画+滚动的+飞舞的小球
源代码如下: <!DOCTYPE html><html><head> <title>xi</title> <meta charset= ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
随机推荐
- Cisco 交换Trunk配置
交换Trunk配置 #进入直连端口下 config)#int f0/1 #配置trunk封装协议 config)#switchport trunk encapsulation dot1q #配置为tr ...
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- linux把软件安装到指定目录
1.安装包带configure文件的: ./configure --prefix=安装目录 2.安装包不带configure文件,只带MakeFile 2.1 make install PREFIX= ...
- 20145324 《Java程序设计》第1周学习总结
20145324 <Java程序设计>第1周学习总结 教材学习内容总结 1.Java是程序语言.标准规范.代表解决问题的平台 2.三大平台:Java SE(JVM.JRE.JDK与Java ...
- java第四周学习总结
学号20145336 <Java程序设计>第4周学习总结 教材学习内容总结 继承 继承符合(Don't Repeat Yourself)原则,即在自己的代码中不要重复自己编写的信息,这在多 ...
- obtainBuffer timed out (is the CPU pegged?)
https://stackoverflow.com/questions/5293025/audiotrack-lag-obtainbuffer-timed-out [典] 03-13 14:55:57 ...
- xml简单介绍及libmxml编程
今天我们来简单介绍一下,关于xml的一些内容,包括自己编写一些程序进行生成和解析. 首先我们我们还是从xml的演化历史来了解一下它吧. 历史演化 GML: 在20世纪60年代为了促进数据交换和操作,通 ...
- 解决"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站"的问题
在ASP.NET MVC项目中,使用AJAX向控制器发送GET请求获取JSON数据时,出现这个错误:"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站.若要允许 G ...
- ETL增量处理总结
1 LOG表 1.1 思路 用log表记录业务库某表yw_tableA发生变化数据的主键.数据进入BI库目标表bi_tableA前,先根据log表记录的主键进行delete. 1.2 设计 1.2.1 ...
- Docker容器可以使用容器平台管理自动重启实现自修复吗?
容器的自修复功能是经常被吹嘘的.因为容器是衣服,人躺下了,衣服也躺下了,容器平台能够马上发现人躺下了,于是可以迅速将人重新唤醒工作. 而虚拟机是房子,人躺下了,房子还站着.因而虚拟机管理平台不知道里面 ...