HTML怎么样让文字来回在背景里面碰撞滚动
html吧
全部回复
仅看楼主
level 1
贴吧用户_5SDU5AZ 楼主


2020年03月26日 13点03分 1
level 8
周存存
试试<marquee>
（这种上古动画现在已经绝迹了，不要用。）
2020年03月27日 01点03分 2
level 1
丶影-奈斯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
width: 400px;
height: 450px;
background-color: green;
position: relative;
}
.box > .box-sub {
font-size: 15px;
width: 30px;
height: 15px;
line-height: 15px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="box-sub">滚动</div>
</div>
<script>
var oClBox = document.querySelector('.box'),
oClBoxSub = document.querySelector('.box>.box-sub'), x = 1, y = 1;
setInterval(function() {
oClBoxSub.style.left = oClBoxSub.offsetLeft + x + 'px';
oClBoxSub.style.top = oClBoxSub.offsetTop + y + 'px';
if (oClBoxSub.offsetLeft >= oClBox.offsetWidth - oClBoxSub.offsetWidth) x = -1;
else if (oClBoxSub.offsetLeft <= 0) x = 1;
if (oClBoxSub.offsetTop >= oClBox.offsetHeight - oClBoxSub.offsetHeight) y = -1;
else if (oClBoxSub.offsetTop <= 0) y = 1;
}, 10);
</script>
</body>
</html>
2020年03月27日 02点03分 3
1