html中碰文字图片动,【视频】HTML怎么样让文字来回在背景里面碰撞滚动【html吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

.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;

}

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);