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

我的代码分叉了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>

最佳答案

问题在于，一旦启动跟随光标功能，即使鼠标离开身体后，它仍会继续移回最后一个已知的鼠标位置。我只是在followcursor函数中检查了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>

关于javascript - 不能使用jQuery覆盖jQuery生成的内联样式吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44299582/