个人中心
gpt4 book ai didi

javascript - 无法使用 jQuery 覆盖 jQuery 生成的内联样式？

转载 作者：行者123 更新时间：2023-11-29 23:45:33 27 4
gpt4 key购买 nike

我的代码正在 fork 这个 pen ，我还将我的代码包含在这篇文章下的堆栈片段中。

我想实现的是:

  1. 当光标不在体内时，眼球会随机移动(实现)。

  2. 当光标进入 body 时，眼球跟随光标(实现)。

  3. 当光标离开 body 时，眼球再次开始随机移动(未实现)。

我在 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>

最佳答案

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

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

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

27 4 0
文章推荐： javascript - @ngrx/effects BehaviourSubject 为订阅者提供最后的值(value)
文章推荐： javascript - 尝试循环一个函数以在多个元素上运行 - jQuery
文章推荐： javascript - 使用 AJAX 将基于 JSON 的远程数据导入 Select2
文章推荐： javascript - 如何在 JavaScript 中从 GridView 获取值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com