1、先使用 HTML和CSS 进行页面布局,将多出的文本先溢出隐藏。
2、使用定时器将文本每过1秒钟向上走,达到文本自动切换的功能
3、当鼠标滑过文本时,文本停止向上走,当鼠标离开文本时,文本将每过1秒
钟向上走
内容:
1.每时每课,给你新机会
2.HTML定义了网页的内容
根据你的描述:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cter">
<div id="text">1.每时每课,给你新机会<br><br>2.HTML定义了网页的内容<br><br></div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
const text = document.getElementById("text");
var inv;
const startS = () => {
inv = setInterval(()=>{
text.innerHTML += `1.每时每课,给你新机会<br><br>2.HTML定义了网页的内容<br><br>`
text.style.top = text.style.top.split("px")[0]-50+"px";
},1000);
}
text.addEventListener("mouseenter",()=>{
clearInterval(inv);
});
text.addEventListener("mouseleave",()=>{
startS();
});
startS();
style.css
#text {
top: 0;
font-size: 25px;
line-height: 25px;
position: absolute;
transition: top 1s;
}
.cter {
position: relative;
height: 30px;
overflow: hidden;
}
有用采纳,需要讲解欢迎留言
看看是不是你想要的效果