2017-02-28 74 views
0

我想要2個假貨遊標,我試過這個創建2個遊標。如何隨機移動假光標?

// get the fake cursor by is id 
var xyMirror = document.getElementById('fakeCursor'); 
var xyMirror2 = document.getElementById('fakeCursor2'); 
// listen for mouse movements 
window.onmousemove = function(event) { 
// get the user's mouse position 
var X = event.clientX; 
var Y = event.clientY; 
// get the browser window dimensions 
windowHeight = window.innerHeight; 
windowWidth = window.innerWidth; 
// create an inversion of the mouse X, Y position 
// subtract mouse X position from window width 
// subtract mouse Y position from window height 
var fakeX = windowWidth - X; 
var fakeY = windowHeight - Y; 

// use those numbers to update the fake cursor position 
xyMirror.style.top = fakeY+'px'; 
xyMirror.style.left = fakeX+'px'; 
xyMirror2.style.top = 10 + fakeY+'px' ; 
xyMirror2.style.left = 20 + fakeX+'px'; 
} 

現在他們的運動依賴於原來的光標, 我的問題是 如何才能將他們隨機

+0

'Math.random'一些事情嗎? 'setInterval'? – evolutionxbox

+0

@evolutionxbox不,我認爲我應該使用類似時間的東西 – parik

+0

當你說「像時間」時,你是什麼意思? – evolutionxbox

回答

1

你可以做這樣的

// get the fake cursor by is id 
 
var xyMirror = document.getElementById('fakeCursor'); 
 
var xyMirror2 = document.getElementById('fakeCursor2'); 
 
xyMirror.style.position = "absolute"; 
 
xyMirror2.style.position = "absolute"; 
 
var xMax = 0;var yMax = 0; 
 
// listen for mouse movements 
 
window.onmousemove = function(event) { 
 
\t // Use event X and Y to set max value 
 
\t if (event.clientX > xMax) xMax = event.clientX; 
 
\t if (event.clientY > yMax) yMax = event.clientY; 
 
\t // Random position for fakeCursor 
 
\t xyMirror.style.left = getRandomArbitrary(0, xMax) +'px'; 
 
\t xyMirror.style.top = getRandomArbitrary(0, yMax)+'px'; 
 
\t // Random position for fakeCursor2 
 
\t xyMirror2.style.left = getRandomArbitrary(0, xMax) +'px'; 
 
\t xyMirror2.style.top = getRandomArbitrary(0, yMax) +'px'; 
 
} 
 

 
function getRandomArbitrary(min, max) { 
 
\t return Math.random() * (max - min) + min; 
 
}
<div id="fakeCursor">fake1</div> 
 
<div id="fakeCursor2">fake2</div>