这是一个使用JavaScript编写的HTML页面，实现了文字无限循环向上滚动的效果。通过设置CSS样式和JavaScript定时器，当鼠标悬浮在滚动区域上方时滚动停止，离开时恢复滚动。页面中包含了一段Beyond乐队歌曲《谁伴我闯荡》的歌词作为滚动内容。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js文字无限循环向上滚动</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#scroll {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #3F51B5;
overflow: hidden;
}
#scroll #con1,
#con2 {
width: 100%;
}
.title {
color: red;
}
#scroll p {
text-align: center;
height: 16px;
line-height: 16px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<div id="scroll">
<div id="con1">
<p class="title">谁伴我闯荡 -Beyond</p>
<p>前面是哪方</p>
<p>谁伴我闯荡</p>
<p>沿路没有指引</p>
<p>若我走上又是窄巷</p>
<p>寻梦像扑火</p>
<p>谁共我疯狂</p>
<p>长夜渐觉冰冻</p>
<p>但我只有尽量去躲</p>
<p>几多天真的理想</p>
<p>几多找到是颓丧</p>
<p>沉默去迎失望</p>
<p>几多心中创伤</p>
<p>只有淡忘</p>
<p>从前话说要如何</p>
<p>其实你与昨日的我</p>
<p>活到今天变化甚多</p>
<p>只有顽强</p>
<p>明日路纵会更彷徨</p>
<p>疲倦惯了再没有感觉</p>
<p>别再可惜计较什么</p>
<p>始终上路过</p>
</div>
<div id="con2"></div>
</div>
<script>
var time = 60; // 滚动间隙
var box = document.getElementById('scroll'); // 获取父元素
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function Up() {
if (box.scrollTop >= con1.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++
}
}
var setlId = setInterval(Up, time);
//鼠标移上父元素时清除定时器
box.onmouseover = function() {
clearInterval(setlId);
}
//鼠标离开父元素时触发事件
box.onmouseout = function() {
setlId = setInterval(Up, time);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
