mousemove - 當滑鼠滑入指定內容時觸發

Posted on In

這章節要講解的是：「滑鼠滑過去」的事件

mousemove–> 當滑鼠「滑入指定內容」時，會觸發某個事件

html:

1
<div class="box"></div>

css:

1
2
3
4
5
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

在el做監聽事件.addEventListener

JS:

當滑鼠「滑入.box」時，會觸發mousemove事件

🎃 建立變數el，來選取「.box」

在el做監聽事件.addEventListener

🎃 一旦觸發「mousemove事件」，就會執行 function

1
2
3
4
5
var el = document.querySelector('.box');

el.addEventListener('mousemove',function(){
    alert('hello');
},false);

🎃 當滑鼠「滑入.box」時，就會跳出alert('hello');

小遊戲

老師的範例

https://jsbin.com/venuqoreqi/edit?html,css,console,output

我的 jsbin 範例

https://jsbin.com/qikogad/edit?html,js,output

html:

🎃 .box用來寫「主要的樣式」

🎃 .box-1~.box-6 用來做「不同的位移」

1
2
3
4
5
6
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
<div class="box box-6"></div>

css:

🎃 每個.box跑的速度都不一樣–> 是用「animation的“秒數”」去調整的

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
.box{
    width: 15px;
    height: 15px;
    background-color: tomato;
    position: absolute;
}
.box-1{
    top: 0px;
    left: 50px;
    animation: funnyBox 2s infinite;
}
.box-2{
    top: 0px;
    left: 90px;
    animation: funnyBox 4s infinite;
}
.box-3{
    top: 0px;
    left: 130px;
    animation: funnyBox 3s infinite;
}
.box-4{
    top: 0px;
    left: 170px;
    animation: funnyBox 1.5s infinite;
}
.box-5{
    top: 0px;
    left: 210px;
    animation: funnyBox 3.5s infinite;
}
.box-6{
    top: 0px;
    left: 250px;
    animation: funnyBox 2.5s infinite;
}

@keyframes funnyBox{
    0%{
        top: 0px;
    }
    30%{
        top: 150px;
    }
    100%{
        top: 0px;
    }
}

JS:

陣列中的每個元素，都綁定“.addEventListener”

在做類似「障礙遊戲」時，就可以利用此技巧。

🎃 建立變數el，用.querySelectorAll來選取「所有的.box」–> 會用「陣列」來呈現「選取到的.box」：

var el = document.querySelectorAll('.box');

🍋 用console.log(el);來看「選取出來的“陣列”」

🎃 為了要讓「陣列中的每個元素，都綁定“.addEventListener”」，就必須使用「for迴圈」–> 依序撈出「陣列中的每個.box」後，依序套入“mousemove事件”

JS:

1
2
3
4
5
6
7
8
9
var el = document.querySelectorAll('.box');

var Len = el.length;

for(var i=0; i<Len; i++){
    el[i].addEventListener('mousemove',function(){
        alert('你輸了！');
    },false);
}