当前位置:网站首页>Follow the mouse's angle and keyboard events
Follow the mouse's angle and keyboard events
2022-07-06 02:31:00 【MyDreamingCode】
One 、 Follow the mouse angel
1. e.clientX e.clientY: Coordinates relative to the viewable area of the browser window
2. e.pageX e.pageY: Coordinates relative to the document page
3. e.screenX e.screenY: Coordinates relative to the computer screen
<!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>
body {
height: 2000px;
}
div {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<div>angel</div>
<script>
var div = document.querySelector('div');
document.addEventListener('mousemove',function(e) {
div.style.top = e.pageY - 50 + 'px';
div.style.left = e.pageX - 50 + 'px';
})
</script>
</body>
</html>
Two 、 Keyboard events
1. keyup: The keyboard bounced up
document.addEventListener('keyup',function() {
console.log(' The keyboard bounced up ');
})
2. keydown: Press the keyboard
document.addEventListener('keydown',function() {
console.log(' Press the keyboard ');
})
3. keypress: Press the keyboard ( Inside keyCode Case sensitive ASCII value , But the function key is not recognized )
document.addEventListener('keypress',function() {
console.log(' Press the keyboard ');
})
边栏推荐
- Audio and video engineer YUV and RGB detailed explanation
- 会员积分营销系统操作的时候怎样提升消费者的积极性?
- 2020.02.11
- Use Scrollview and tabhost to realize vertical scrollbars and tabs
- inherited constructors
- Use image components to slide through photo albums and mobile phone photo album pages
- 【coppeliasim】高效传送带
- [Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 10
- The intelligent material transmission system of the 6th National Games of the Blue Bridge Cup
- General process of machine learning training and parameter optimization (discussion)
猜你喜欢
The intelligent material transmission system of the 6th National Games of the Blue Bridge Cup
Paper notes: graph neural network gat
构建库函数的雏形——参照野火的手册
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 8
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 14
Déduisez la question d'aujourd'hui - 729. Mon emploi du temps I
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 6
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 9
Lecture 4 of Data Engineering Series: sample engineering of data centric AI
MySQL winter vacation self-study 2022 11 (9)
随机推荐
MySQL learning notes - subquery exercise
有没有sqlcdc监控多张表 再关联后 sink到另外一张表的案例啊?全部在 mysql中操作
零基础自学STM32-野火——GPIO复习篇——使用绝对地址操作GPIO
在GBase 8c数据库中使用自带工具检查健康状态时,需要注意什么?
Data preparation
Use the list component to realize the drop-down list and address list
更换gcc版本后,编译出现make[1]: cc: Command not found
Global and Chinese market of commercial cheese crushers 2022-2028: Research Report on technology, participants, trends, market size and share
ftp上传文件时出现 550 Permission denied,不是用户权限问题
HDU_p1237_简单计算器_stack
【MySQL 15】Could not increase number of max_open_files to more than 10000 (request: 65535)
【coppeliasim】高效传送带
事故指标统计
Ue4- how to make a simple TPS role (II) - realize the basic movement of the role
Global and Chinese market of wheelchair climbing machines 2022-2028: Research Report on technology, participants, trends, market size and share
我把驱动换成了5.1.35,但是还是一样的错误,我现在是能连成功,但是我每做一次sql操作都会报这个
I changed the driver to 5.1.35, but it is still the same error. I can succeed even now, but I will report this every time I do an SQL operation
力扣今日题-729. 我的日程安排表 I
继承的构造函数
What should we pay attention to when using the built-in tool to check the health status in gbase 8C database?