CSS3&Javascript marquee 滚动新闻

刺骨的言语ヽ痛彻心扉 2022-04-21 22:16 182阅读 0赞

![在这里插入图片描述][20181031181003461.gif]

`<marquee>`在HTML和HTML5中都属于废弃的特性，建议不要使用这个标签。代替的方案就是使用CSS3中的animation和keyframes来实现跑马灯。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    :root{
    	--marquee-width: 15em;
    	--marquee-height: 1.5em;
    	--marquee-indent: 2em;
    	--marquee-horizontal-duration: 5s;
    	--marquee-vertical-duration: 0.5s;
    	/* 设置font-size用来等比例缩放em和rem单位的值 */
    	font-size: 200%;
    }
    a, a:link, .a:visited, a:hover, a:active {
    	text-decoration: none;
    	color:inherit;
    }
    .marquee {
    	/* ul和ol默认padding不为0; div的padding默认为0	*/
    	padding:0;
    	width: var(--marquee-width);
    	height: var(--marquee-height);
    	overflow: hidden;
    	/* 当子元素是absolute的时候，overflow-x: hidden只有当父对象的position=relative的时候才会生效 */
    	position: relative;
    	
    	line-height: var(--marquee-height);
    	background-color: #f5f5f5;
    	border: 1px solid #DDD;
    	border-radius: calc(var(--marquee-height) / 2);
    	box-shadow: 1px 1px 3px #333 ;
    }
    .marquee-horizontal::before {
    	/* content 里面只能存储纯文本，如果需要a标签，就不能使用伪元素 */
    	content: "This is a test about marquee, hello world...";
    	white-space: nowrap;
    	animation: anim-marquee-horizontal var(--marquee-horizontal-duration) linear infinite;
    	/* indent指的是段落开头留白的宽度，通过该值可以模拟出每轮文字动画的间隔效果 */
    	/* 只有当position=absolute的时候，子元素宽度才能超过父元素 */
    	position:absolute;
    	text-indent: var(--marquee-indent);
    }
    @keyframes anim-marquee-horizontal {
    	from {
    		/*
    		在left,margin,text-indent中使用"百分比%"符号，指的都是相对父对象的长度
    		translate的"百分比%"相对的是自身长度(但要注意，只有子元素为absolute的时候，子元素长度才能超过父元素，否则最大只能占满父元素的内容宽度)
    		*/
    		transform: translateX(var(--marquee-width));
    	}
    	to {
    		transform: translateX(-100%);
    	}
    }
    
    .marquee-vertical>ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	text-align: center;
    	transition: margin-top var(--marquee-vertical-duration) linear;
    }
    .marquee-vertical-anim {
    	/* animation-fill-mode: forwards 用来让动画执行完后保留在最后的位置 */
    	animation: anim-marquee-vertical var(--marquee-vertical-duration) forwards;
    }
    @keyframes anim-marquee-vertical {
    	from {
    		margin-top: 0;
    	}
    	to {
    		margin-top: calc(var(--marquee-height) * -1);
    	}
    }
    </style>
    <script>
    let data = [
    	["第一条新闻（1）", "#1"],
    	["第二条新闻（2）", "#2"],
    	["第三条新闻（3）", "#3"]
    ];
    
    window.onload = () => {
    	const marqueeVertical = document.getElementById("marquee-vertical");
    	data.forEach((item)=>{
    		const li = document.createElement("li");
    		const a = document.createElement("a");
    		a.setAttribute("href", item[1]);
    		a.innerText = item[0];
    		li.appendChild(a);
    		marqueeVertical.appendChild(li);
    	});
    	const classList = marqueeVertical.classList;
    	const animCls = "marquee-vertical-anim";
    	let marqueeIntervalId = setInterval(()=>{
    		if(classList.contains(animCls)) {
    			classList.remove(animCls);
    			//firstChild等价于children[0]
    			//const firstChild = marqueeVertical.firstChild;
    			const firstChild = marqueeVertical.children[0];
    			marqueeVertical.removeChild(firstChild);
    			marqueeVertical.appendChild(firstChild);
    		} else {
    			classList.add(animCls);
    		}
    		//这里的时间单位为毫秒，设置为动画时间的两倍，可以让文字有停顿的时间
    	}, 1000);
    }
    </script>
    </head>
    <body>
    	<div class="marquee marquee-horizontal"></div>
    <br>
    	<div class="marquee marquee-vertical">
    		<ul id="marquee-vertical" data-duration="1"></ul>
    	</div>
    </body>
    </html>

[20181031181003461.gif]: /images/20220422/6aeff55ec954491585b372cbe2a6497b.png