55 lines
1.2 KiB
HTML
55 lines
1.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title></title>
|
||
|
|
<style>
|
||
|
|
#adv {
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
color: yellow;
|
||
|
|
position: fixed;
|
||
|
|
right: 10px;
|
||
|
|
top: 10px;
|
||
|
|
background-color: blue;
|
||
|
|
}
|
||
|
|
#adv button {
|
||
|
|
float: right;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
color: white;
|
||
|
|
background-color: gray;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="adv">
|
||
|
|
此广告位招租
|
||
|
|
<button>关闭</button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
+function() {
|
||
|
|
var advDiv = document.querySelector('#adv');
|
||
|
|
var button = document.querySelector('#adv button');
|
||
|
|
var counter = 0;
|
||
|
|
button.addEventListener('click', function() {
|
||
|
|
counter += 1;
|
||
|
|
if (counter < 3) {
|
||
|
|
var currentStyle =
|
||
|
|
document.defaultView.getComputedStyle(advDiv);
|
||
|
|
var newTop = parseInt(currentStyle.top) + 20;
|
||
|
|
var newRight = parseInt(currentStyle.right) + 20;
|
||
|
|
advDiv.style.top = newTop + 'px';
|
||
|
|
advDiv.style.right = newRight + 'px';
|
||
|
|
} else {
|
||
|
|
advDiv.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}();
|
||
|
|
// 鼠标按下 - mousedown
|
||
|
|
// 鼠标移动 - mousemove
|
||
|
|
// 鼠标松开 - mouseup
|
||
|
|
// clientX / clientY - 鼠标的横纵坐标
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|