鼠标事件即跟随案例
鼠标事件对象
event对象代表事件的状态,即事件相关的一系列消息的集合,现阶段我们主要是用鼠标对象事件
MouseEvent和键盘事件对象KeyboardEvent
document.addEventListener('click',function(e){
//1.client鼠标在可视区的x和y坐标
console.log(e.clientx);
console.log(e.clienty);
//2.page鼠标在页面文档的x和y坐标(主要)
console.log(e.pageX);
console.log(e.paheV);
//3.sreen鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
跟随鼠标的图片案例
- 鼠标不断地移动,使用鼠标移动事件:mousemove
- 在页面中移动:给document注册事件
- 图片移动距离:不占位置使用决定定位
- 核心原理:每次鼠标移动我们都可以获得最新的鼠标坐标,把这个x和y坐标作为图片地top和left的值可以移动图片。·
<img src="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(3){
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x,'y坐标是' + y);
//记得给left和top加上单位噢
pic.style.left = x + 'px';
pic.style.top = y + 'px';
})
</script>