悬浮窗上有按钮，可以关掉悬浮窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#c{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="c">
<button id="close">close</button>
</div>
<script>
window.onload=function() {
let dx = 1;
let dy = 1;
let fd;
let m = document.getElementById("c");
function fn() {
fd=setInterval(piaofu,30)
}
function piaofu() {
let left = Number.parseInt(window.getComputedStyle(m, null).left);
let right = Number.parseInt(window.getComputedStyle(m, null).right);
let top = Number.parseInt(window.getComputedStyle(m, null).top);
let buttom = Number.parseInt(window.getComputedStyle(m, null).bottom);
if (left <= 0 || right <= 0) {
dx = -dx;
}
if (top <= 0 || buttom <= 0) {
dy = -dy;
}
m.style.left = (left + dx) + "px";
m.style.top = (top + dy) + "px";
}
fn();
m.onmouseover=function () {
clearInterval(fd);
}
m.onmouseout=fn;
document.getElementById("close").onclick=function () {
m.style.display="none";
}
}
</script>
</body>
</html>
网友评论