Question

我的代码正在分发此pen，我还将此代码包含在此帖子的堆栈代码中。

我想要实现的目标是：

当光标不在体内时，眼球会随机移动（达到）。
当光标进入身体时，眼球跟随光标（已实现）。
当光标离开身体时，眼球开始随机移动（未实现）。

我调用了用于在on("mouseleave")事件中随机移动眼球的函数，它确实移动到随机位置但它会立即返回到最后一个光标位置，而不是停留在新位置。谁能指出我正确的方向来解决这个问题？

谢谢！

var 
	mouseOvering = false,
	pupil = $("#pupil"),
	eyeball = $("#iris"),
	eyeposx = 40,
	eyeposy = 20,
	r = $(pupil).width()/2,
	center = {
		x: $(eyeball).width()/2 - r, 
		y: $(eyeball).height()/2 - r
	},
	distanceThreshold = $(eyeball).width()/2 - r,
	mouseX = 0, 
	mouseY = 0;

$("body").ready( function(){
	if ( !mouseOvering ) {
		moveRandomly();
	} 
});

$("body").on('mouseleave', function(){
	mouseOvering = false;
	moveRandomly();
	console.log("mouseleave");
});

$("body").on('mousemove', function(e){
	mouseOvering = true;
	console.log("mouseovering");
	followCursor(e);
});

function moveRandomly() {
	var loop = setInterval(function(){
	 	var xp = Math.floor(Math.random()*80);
	  	var yp = Math.floor(Math.random()*80);
		pupil.animate({left:xp, top:yp});    
	}, 3500);
}

function followCursor(e) {
    var d = {
		x: e.pageX - r - eyeposx - center.x,
		y: e.pageY - r - eyeposy - center.y
    };
    var distance = Math.sqrt(d.x*d.x + d.y*d.y);
    if (distance < distanceThreshold) {
		mouseX = e.pageX - eyeposx - r;
		mouseY = e.pageY - eyeposy - r;
    } else {
		mouseX = d.x / distance * distanceThreshold + center.x;
		mouseY = d.y / distance * distanceThreshold + center.y;
    }
    var xp = 0, yp = 0;
	var loop = setInterval(function(){
		// change 1 to alter damping/momentum - higher is slower
		xp += (mouseX - xp) / 1;
		yp += (mouseY - yp) / 1;
		pupil.css({left:xp, top:yp});    
	}, 2);
}

body {
  background-color: #D1D3CF;
}

#container {
  display: inline;
  height: 400px;
  width: 400px;
}

#eyeball {
  background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
  height: 300px;
  width: 300px;
  border-radius: 100%;
  position: relative;
}

#iris {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
  height: 80%;
  width: 80%;
  border-radius: 100%;
  position: absolute;
}

#pupil {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #000000, #000);
  height: 55%;
  width: 55%;
  border-radius: 100%;
  position: absolute;
}

@keyframes move {
  50% {
    transform: translate(-50px, 50px);
  }
}

@keyframes move2 {
  50% {
    transform: translate(-20px, 20px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="eyeball">
      <div id="iris">
        <div id="pupil"></div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

Answer 1

使用Javascript，您只能跟踪光标在网页上的位置。如果将光标移到正文之外，则代码无法知道光标的位置。

当您将光标移到窗口外时，这就是眼睛跟踪光标停止移动的原因。

Answer 2

问题在于，一旦启动了跟随功能，即使在鼠标离开身体后，它也会继续移回到最后一个已知的鼠标位置。我只是检查你的跟随函数中的mouseOvering变量：

var 
	mouseOvering = false,
	pupil = $("#pupil"),
	eyeball = $("#iris"),
	eyeposx = 40,
	eyeposy = 20,
	r = $(pupil).width()/2,
	center = {
		x: $(eyeball).width()/2 - r, 
		y: $(eyeball).height()/2 - r
	},
	distanceThreshold = $(eyeball).width()/2 - r,
	mouseX = 0, 
	mouseY = 0;

$("body").ready( function(){
	if ( !mouseOvering ) {
		moveRandomly();
	} 
});

$("body").on('mouseleave', function(){
	mouseOvering = false;
	console.log("mouseleave");
});

$("body").on('mousemove', function(e){
	mouseOvering = true;
	console.log("mouseovering");
	followCursor(e);
});

function moveRandomly() {
	var loop = setInterval(function(){
        
	 	var xp = Math.floor(Math.random()*80);
	  	var yp = Math.floor(Math.random()*80);
        if (!mouseOvering) {
		   pupil.animate({left:xp, top:yp});
        }
	}, 3500);
}

function followCursor(e) {
    var d = {
		x: e.pageX - r - eyeposx - center.x,
		y: e.pageY - r - eyeposy - center.y
    };
    var distance = Math.sqrt(d.x*d.x + d.y*d.y);
    if (distance < distanceThreshold) {
		mouseX = e.pageX - eyeposx - r;
		mouseY = e.pageY - eyeposy - r;
    } else {
		mouseX = d.x / distance * distanceThreshold + center.x;
		mouseY = d.y / distance * distanceThreshold + center.y;
    }
    var xp = 0, yp = 0;
	var loop = setInterval(function(){
		// change 1 to alter damping/momentum - higher is slower
		xp += (mouseX - xp) / 1;
		yp += (mouseY - yp) / 1;
        if (mouseOvering) {
		pupil.css({left:xp, top:yp});
        }
	}, 2);
}

body {
  background-color: #D1D3CF;
}

#container {
  display: inline;
  height: 400px;
  width: 400px;
}

#eyeball {
  background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
  height: 300px;
  width: 300px;
  border-radius: 100%;
  position: relative;
}

#iris {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
  height: 80%;
  width: 80%;
  border-radius: 100%;
  position: absolute;
}

#pupil {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #000000, #000);
  height: 55%;
  width: 55%;
  border-radius: 100%;
  position: absolute;
}

@keyframes move {
  50% {
    transform: translate(-50px, 50px);
  }
}

@keyframes move2 {
  50% {
    transform: translate(-20px, 20px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="eyeball">
      <div id="iris">
        <div id="pupil"></div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

不能使用jQuery覆盖jQuery生成的内联样式吗？

2 个答案: