鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的 X 坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的 Y 坐标 |
e.pageX | 返回鼠标相对于文档页面的 X 坐标 IE9+支持 |
e.pageY | 返回鼠标相对于文档页面的 Y 坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的 XY坐标 |
-
效果演示
-
css
源码img { position: absolute; // ** width: 160px; }
-
html
结构<div> <img src="img/mousemove.png" alt=""> </div>
-
JS
原理分析<script> // 获取元素 img var photo = document.querySelector('img'); document.addEventListener('mousemove', function (e) { // pageX pageY var photoX = e.pageX + 'px'; var photoY = e.pageY + 'px'; // 给图片添加 style 改变 left top photo.style.left = photoX; photo.style.top = photoY; });