本文實例為大家分享了JavaScript實現(xiàn)跟隨鼠標移動的具體代碼，供大家參考，具體內(nèi)容如下
跟隨鼠標移動的盒子(包括檢測邊界值)
效果圖：
代碼：
|
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red; }</style> <body> <div>111111111</div> <script> var div = document.getElementsByTagName('div')[0]; div.onmousedown = function(e) { e = window.event || e; // 鼠標按下 獲取鼠標距離頁面左側(cè)距離 var x = e.clientX; // 獲取鼠標距離頁面上側(cè)距離 var y = e.clientY; // 元素距離頁面左側(cè)距離 var elex = div.offsetLeft; // 元素距離頁面上側(cè)距離 var eley = div.offsetTop; // 相減得到鼠標距離元素的距離 var X = x - elex; var Y = y - eley; console.log(X, Y); document.onmousemove = function(e) { e = window.event || e; // 鼠標移動過程中 獲取鼠標距離頁面距離 var movex = e.clientX; var movey = e.clientY; // 1.左側(cè)邊界值 // 元素移動過程中距離頁面左側(cè)距離 var leftx = movex - X; var lefty = movey - Y; // 1.左側(cè)邊界值 if (leftx <= 0) { leftx = 0; } // 2.上側(cè)邊界值 if (lefty <= 0) { lefty = 0 } // 3.右側(cè)邊界值 // 頁面可視區(qū)寬 -元素寬 var rightx = document.documentElement.clientWidth - div.offsetWidth; if (leftx >= rightx) { leftx = rightx } // 4.下側(cè)邊界值 // 頁面可視區(qū)高 -元素高 var righty = document.documentElement.clientHeight - div.offsetHeight; if (lefty >= righty) { lefty = righty; } // 鼠標移動過程中 獲取鼠標距離頁面距離 - 鼠標距離元素的距離 =元素的left top值 div.style.left = leftx + 'px'; div.style.top = lefty + 'px'; } // 抬起清除移動事件 document.onmouseup = function() { document.onmousemove = null; } // 阻止默認事件 return false; } </script></body> </html> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/are_gh/article/details/113190195
