今天这个最有意思
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body,html{height: 100%;}
body{background: #167095;}
img{
width: 200px;
height: 200px;
left: 0;
top: 0;
position: absolute;
}
/*div{
width: 100%;
height: 100%;
}*/
</style>
<title></title>
</head>
<body>
<!--<b>鼠标点击某处, 让精灵移动到该处 (如下图) 鼠标移动时, 让精灵跟随鼠标移动</b>-->
<div><img src="27.png" id="spirit"/></div>
<script>
var fly = document.querySelector("img");
// var out = document.querySelector("div");
document.onmousedown = function(e){//这个地方要用Windows和document,不用的话要在外面包一个div
var a=e.pageX;
var b=e.pageY;
console.log(e.pageX);
console.log(e.pageY);
fly.style.left=(a-100+"px");
fly.style.top=(b-100+"px");
}
document.onmousemove = function(z){
spirit.style.left = z.clientX-100+'px';
spirit.style.top = z.clientY-100 +'px';
}
</script>
</body>
</html>
2618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
