复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
691 let body=document.querySelector("body");//页面内容容器元素 2 document.addEventListener('mousemove',(e)=>{ //添加一个一直存在的鼠标移动监听事件 3 let x=e.clientX; 4 let y=e.clientY; 5 img.style.top=y+"px"; 6 img.style.left=x+"px"; 7 }) 8 9 function mov(e){ //为下一个mousemove事件编写绑定函数 10 let span=document.createElement("span"); 11 span.classList.add('myspan'); 12 let x=e.clientX; 13 let y=e.clientY; 14 span.style.left=x+'px'; 15 span.style.top=y+'px'; 16 17 18 let a=Math.random()*10; 19 span.style.width=5+a+'px'; 20 span.style.height=5+a+'px'; 21 22 body.appendChild(span); 23 // console.log("hahaha"); 24 setTimeout((e)=>{ 25 span.remove(); 26 },1000) 27 } 28 29 function mymov(){ //实现定时取样的函数 30 setInterval(()=>{ //循环定时 31 document.addEventListener('mousemove',mov); 32 setTimeout(()=>{ 33 document.removeEventListener('mousemove',mov); 34 },10); //这里可以写成零(主要是判断大致mov函数取样一次的事件-如果没有复杂并且耗时的操作 实测写成0就可以) 35 },500) //这里时间是定时取样的时间间隔 如果时间太短会在运行过程中停一段时间(注:这里没有改进,我换成了其他效果,具体原因未深究) 36 } 37 mymov();
最后
以上就是淡定溪流最近收集整理的关于监听鼠标移动事件mousemove的定时取样的全部内容,更多相关监听鼠标移动事件mousemove内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复