版权声明:转载请注明出处——http://blog.csdn.net/chy555chy/article https://blog.csdn.net/chy555chy/article/details/83588390
<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>