HTML+CSS入门 如何实现跑马灯/走马灯效果
沉沙 2018-08-24 来源 : 阅读 13327 评论 0

摘要:本篇教程介绍了HTML+CSS入门 如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示:



参数
用法介绍


behavior=scroll, slide, alternate
跑马方式:循环绕行,只跑一次就停住,来回往复运动


direction=left,right
跑马方向:从左向右,从右向左


loop=100
跑马次数:循环100次,如不写默认为一直循环


width=100%,height=200
跑马范围:宽为100%,高为200像素


scrollamount=20
跑马速度:数越大越快


scrolldelay=500
跑马延时:毫秒数,利用它可实现跃进式滚动


hspace=20,vspace=20
跑马区域与其它区域间的空白大小


bgcolor=#00FFCC
跑马区域的背景颜色


face=楷体_GB2312
跑马灯文字字体


color=#ff0000
跑马灯文字颜色


size=3
跑马灯文字字号


STRONG
跑马灯文字加粗



  你已经看到,尽管<marquee>参数不少,但毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯。    

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 13 不喜欢 | 8
看完这篇文章有何感觉?已经有21人表态,62%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程