2017-02-28 70 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>