JavaScript基础
鼠标事件 拖拽事件
//CSS部分
<style>
.box{
height: 100px;
width: 100px;
background-color: aqua;
position: absolute;
top:0;
left:0;
}
*{
margin: 0;
padding: 0;
}
//HTML部分
<body>
<div class="box"></div>
</body>
js部分
<script>
var box = document.querySelector('.box')
box.onmousedown = function(e){
var e = e || window.event
var x = e.offsetX
var y = e.offsetY
document.onmousemove = function(ev){
var ev = ev || window.event
var x1 = ev.clientX
var y1 = ev.clientY
var l = x1 - x
var t = y1 - y
box.style.left = l + 'px'
box.style.top = t + 'px'
}
}
window.onmouseup = function(){
document.onmousemove = null
}
</script>
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
