<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: tomato;
position: relative;
}
</style>
</head>
<!-- 鼠标移入div 按下鼠标 鼠标移动 div 跟着移动，鼠标
抬起，div不动 -->
<body>
<div id="div1" οnmοusedοwn="yidong()"></div>
<script>
let div1 = document.getElementById('div1')
function yidong(){
let event = window.event ||arguments[0]
//获取鼠标移动的坐标
document.onmousemove = function(e){
div1.style.left = e.clientX-event.offsetX + 'px'//鼠标移动div的位置
div1.style.top = e.clientY-event.offsetY + 'px'
}
document.onmouseup = function(){//清除鼠标按下效果
document.onmousemove = ''
}
}
</script>
</body>
</html>
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
