一篇文章帮助你理解跑马灯的滚动原理
IT共享之家
共 2635字,需浏览 6分钟
· 2021-06-26
点击上方“IT共享之家”,进行关注
回复“资料”可获赠Python学习福利
走马灯效果其实就是利用<marquee>标签进行图片和文字滚动,设置的样式不一样,滚动的效果就不一样,实现“走马观花”的效果。
一、滚动方式
1. 普通滚动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</body>
<marquee>这里是您要填的内容</marquee>
</html>
1.1 文字碰到左边就会停止
<marquee behavior="slide">这里是您要填的内容</marquee>
1.2 文字碰到右边就会停止
<marquee behavior="slide" direction="right">这里是您要填的内容</marquee>
2.图片滚动
2.1 预设滚动
图片滚动到右边界,自动再从左边滚动。
<marquee behavior="scroll"><img src="img/border.png"></marquee>
2.2 来回滚动
<marquee behavior="alternate"><img src="img/border.png"></marquee>
2.3 滚动的方向
向左滚动
<marquee direction="left"><img src="img/border.png"></marquee>
向右滚动
<marquee direction="right"><img src="img/border.png"></marquee>
向下滚动
<marquee direction="down"><img src="img/border.png"></marquee>
向上滚动
<marquee direction="up"><img src="img/border.png"></marquee>
二、参数
1. 设定滚动次数(可自行更改参数)
<marquee loop="2">这里是您要填的内容</marquee>
2. 设定背景颜色 (16进位颜色或文字输入)
<marquee bgcolor="#??????">这里是您要填的内容</marquee>
3. 设定滚动宽度
为了方便辨别,这里加上bgcolor属性。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body>
<div >
<p>初始化</p>
<marquee bgcolor="red"; >这里是您要填的内容</marquee>
</div>
<div>
<p>设置高度</p>
<marquee bgcolor="aqua";width="380">这里是您要填的内容</marquee>
</div>
</body>
</html>
4. 设定滚动高度
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body>
<div >
<p>初始化</p>
<marquee bgcolor="red"; >这里是您要填的内容</marquee>
</div>
<div>
<p>设置高度</p>
<marquee bgcolor="aqua"; height="38">这里是您要填的内容</marquee>
</div>
</body>
</html>
5. 设定滚动速度 (可自行更改参数)
<marquee scrollamount="30">这里是您要填的内容</marquee>
三、总结
本文以html为基础,主要介绍了常见的效果(跑马灯)的滚动原理,详细介绍了三种常见的滚动以及其相关属性,以及对设置参数时遇到的难题一一解答,希望能够帮助你学习。
看完本文有收获?请转发分享给更多的人
IT共享之家
入群请在微信后台回复【入群】
------------------- End -------------------
往期精彩文章推荐:
评论
盘点Lombok的几个骚操作,你绝对没用过!
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
0
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗?
来源:blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目
小哈学Java
0
如何计算数据中心的冷却需求?
今日分享 【导读】数据中心的冷却要求受多种因素影响,包括设备的热量输出、占地面积、设施设计和电气系统功率额定值等等……众所周知,环境因素会严重影响数据中心设备。过多的热量积聚会损坏服务器,可能导致其自动关闭。经常在高于可接受的温度下运行服务器会缩短其使用
数据中心运维管理
0
多人同时导出 Excel 干崩服务器!新来的阿里大佬给出的解决方案太优雅了!
点击关注公众号,Java 干货及时推送↓推荐阅读:面试辅导,我们出大成果了!来源:juejin.cn/post/7259249904777838629前言 业务诉求:考虑到数据库数据日渐增多,导出会有全量数据的导出,多人同时导出可以会对服务性能造成影响,导出涉及到mysql查询的io操作,
Java技术栈
1
什么样的冷却方法适合数据中心运营?
冷却数据中心的最简单方法是安装空气交换器,通过服务器室生成冷空气。但是,如果想要节省资金,至少从长远来看,更好的方法可能是在每个机架上安装空气交换器,并使用它们为单个机架的服务器降温。"后机架冷却",与数据中心中更为传统的空气冷却系统相比,特别是在能源效率方面,其具有一些优势。冷却数据中心的最简单
数据中心运维管理
0
大厂都在用的 Git 代码管理规范 !
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
2
架构应该如何来理解?
来源:zhuanlan.zhihu.com/p/141027477👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:htt
小哈学Java
0
Go 1.22 的新增功能系列之二:reflect.TypeFor
Go 1.22 的第一个候选版本已经发布,这意味着最终版本即将发布,现在是我在博客中介绍我在这个周期中所做工作的时候了。像往常一样,我的贡献很小,但它们是我的,所以我将从幕后的角度来谈谈它们。首先是reflect.TypeFor。这是整个函数:// TypeFor returns the [Type
GoCN
0