console
window.onload = function() {
var pingmuw = document.documentElement.clientWidth;
var pingmuh = document.documentElement.clientHeight;
var box = document.getElementById('box');
var btn = box.getElementsByTagName('button')[0];
var x = 8;
var y = 8;
var maxw = pingmuw - box.offsetWidth;
var maxh = pingmuh - box.offsetHeight;
var ad = function() {
var laoleft = box.offsetLeft;
var laotop = box.offsetTop;
var xinleft = laoleft + x;
var xintop = laotop + y;
if (xintop > maxh) {
xintop = maxh;
}
if (xinleft > maxw) {
xinleft = maxw;
}
if (xinleft < 0) {
xinleft = 0;
}
if (xintop < 0) {
xintop = 0;
}
box.style.left = xinleft + 'px';
box.style.top = xintop + 'px';
if (xintop == maxh) {
y = -8;
}
if (xintop == 0) {
y = 8;
}
if (xinleft == maxw) {
x = -8;
}
if (xinleft == 0) {
x = 8;
}
}
var timer = setInterval(ad, 20)
box.onmouseover = function() {
clearInterval(timer);
}
box.onmouseout = function() {
timer = setInterval(ad, 20)
}
btn.onclick = function() {
box.style.display = 'none';
}
}
<div id="box">
<button>
删除
</button>
</div>
* {
padding: 0;
margin: 0;
}
#box {
width: 300px;
height: 200px;
background: red;
position: relative;
}
#box button {
position: absolute;
top: 2px;
right: 2px;
background: #fff;
color: red;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
}