当前位置：网站首页>滚动播报效果的实现

滚动播报效果的实现

2022-06-23 06:23:00 【坏蛋呆呆】

一、背景

业务需求：在网站头部的logo和用户登录状态中间，滚动播报后台设置的通知内容。

二、css实现

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3_MARQUEE</title>

    <style>
		*{margin: 0;padding: 0;}
		.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
		.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
		.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
		.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
		.notice{
			float: left;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
        .marquee{         
            white-space: nowrap;
            box-sizing: border-box;
			position: absolute;
            animation: marquee 50s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 0% }
            100% { text-indent: -100% }
        }
    </style>
</head>
<body>
	<div class="wrap">
		<div class="logo">logo</div>
		<div class="notice">
			<p class="marquee">重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp</p>
		</div>
		<div class="date">2019/7/30 12:28:28</div>
	</div>
</body>
</html>

缺点

animation属性不支持 ie9及之前的版本；
通报内容长度不同的话，不能以固定的速度来移动。

优点

纯CSS实现，实现简单。
可配置滚动方向和速度

核心详解

animation属性

此属性是动画属性，animation是属性的简写，它包括6个属性，分别是animation-name(规定需要绑定到选择器的 keyframe 名称)、animation-duration(规定完成动画所花费的时间，以秒或毫秒计)、animation-timing-function(规定动画的速度曲线)、animation-delay(规定在动画开始之前的延迟)、animation-iteration-count(规定动画应该播放的次数)、animation-direction(规定是否应该轮流反向播放动画)。

animation语法

animation: namedurationtiming-functiondelayiteration-countdirection;

@keyframes

通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，可以多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes语法

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

三、marquee标签实现

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3_MARQUEE</title>

    <style>
		*{margin: 0;padding: 0;}
		.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
		.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
		.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
		.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
		.notice{
			float: left;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
    </style>
</head>
<body>
	<div class="wrap">
		<div class="logo">logo</div>
		<div class="notice">
			<marquee  behavior='scroll' scrollamount='4' onmouseout='this.start()' onmouseover='this.stop()'>【通知】关于中秋放假通知，具体链接请点击这里！&nbsp;&nbsp;&nbsp;&nbsp;【通报】关于公司室内禁烟通报！！！</marquee>
		</div>
		<div class="date">2019/7/30 12:28:28</div>
	</div>
</body>
</html>

缺点

marquee 标签是HTML中的废弃标签，不建议使用！

优点

支持绝大数浏览器。
不管文本大小可以以固定速度移动元素，实现效果。
使用起来更简单。

核心详解

marquee标签

Marquee标签属性
属性	作用	参数	示例
direction	滚动的方向	up:向上 down:向下 left:向左 right:向右	<marquee direction="left">...</marquee>
behavior	滚动的方式	scroll:循环滚动 slide:只滚动一次就停止 alternate:来回交替滚动如果未指定值，默认值为 `scroll`	<marquee behavior="scroll">...</marquee>
scrollamount	滚动的速度	设置每次滚动时移动的长度，以像素为单位；如果没有它，默认为6	<marquee scrollamount="5">...</marquee>
scrolldelay	滚动延迟	设置滚动的时间间隔，单位是毫秒，通常scrolldelay是不需要设置的	<marquee scrolldelay="100">...</marquee>
loop	滚动循环次数	默认值是-1，滚动会不断的循环下去	<marquee loop="2">...</marquee>

marquee标签的事件
事件	作用	示例
onmouseout()	设置鼠标移出改区域时继续滚动。	<marquee οnmοuseοut='this.start()'>...</marquee>
onmouseover()	设置鼠标移入改区域时停止滚动。	<marquee οnmοuseοver='this.stop()'>...</marquee>
`onbounce`	当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发
`onfinish`	当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
`onstart`	当 marquee 开始滚动时触发。

注意

marquee元素中的内容如果出现换行的情况，会导致效果无法实现，可以使用js或jq将内容填充到上层元素内，如：$(".notice").html("<marquee behavior='scroll' scrollamount='4' οnmοuseοut='this.start()' οnmοuseοver='this.stop()'>"+内容+"</marquee>")

原网站

版权声明
本文为[坏蛋呆呆]所创，转载请带上原文链接，感谢
https://blog.csdn.net/huaidandaidai1/article/details/98458213