<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector("div")
div.style.position = "absolute"
w = parseInt(getComputedStyle(div).width)
h = parseInt(getComputedStyle(div).height)
div.onmousedown = function(event) {
div.onmousemove = function(ev) {
console.log(ev.offsetX)
console.log(ev.offsetY)
div.style.left = (ev.pageX - w / 2) + "px"
div.style.top = (ev.pageY - h / 2) + "px"
}
}
div.onmouseup = function() {
div.onmousemove = null
}
</script>
</body>
</html>
效果：
默认时div在左上角
鼠标点击时拖动，松开鼠标确定位置
星星点灯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
const img_w=254
const img_h=218
document.body.style.backgroundColor='#000'
document.onclick=function(event){
console.info(event.pageX)
console.info(event.pageY)
let img=document.createElement("img")
img.src="0.gif"
img.style.position="absolute"
w=getRandom(20,200)
img.style.width=w+"px"
h=w*img_h/img_w
img.style.height=h+"px"
img.style.left=(event.pageX-w/2)+"px"
img.style.top=(event.pageY-h/2)+"px"
document.body.appendChild(img)
}
function getRandom(min,max){
return min+Math.ceil((max-min)*Math.random())
}
</script>
</body>
</html>
效果：
默认时页面是黑色
点击屏幕后会出现大小不同的星星图案
4230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
