Jquery 如何使三角形箭头跟随鼠标的路径？

我想让主导航幻灯片上的小三角形指针向左或向右移动，这取决于用户将鼠标指向主标题的位置，如“主页”、“产品”、“登录”或“购物车”。请访问我的网站

www.inpha.co

要查看我正试图做什么的实例，请访问此网站

www.harris-active.co.uk

。我已经为下面的主导航提供了CSS代码，因此您可以看到缺少了什么。请提供完整的详细信息和关于代码确切放置位置的分步说明。如果还需要jQuery，那么也请提供完整的详细信息

CSS代码：

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}

#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}

#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}

#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:1px;
}

#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 57px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
background: url(nav-hover-orange.png) no-repeat center bottom;
border: 0;
}

---

这不需要jQuery

首先将元素设置为css

.trail { 
position: absolute;
height: 6px; width: 6px;
border-radius: 3px;
background: teal;

}

您必须调整目标元素的位置

然后JS：

// dots is an array of Dot objects,
// mouse is an object used to track the X and Y position

var dots = [],
mouse = {
  x: 0,
  y: 0
};

// The Dot object used to scaffold the dots
var Dot = function() {
this.x = 0;
this.y = 0;
this.node = (function(){
var n = document.createElement("div");
n.className = "trail";
document.body.appendChild(n);
return n;
}());
 };
 // make a draw prototype function
Dot.prototype.draw = function() {
this.node.style.left = this.x + "px";
this.node.style.top = this.y + "px";
};

// you do not need this part for your purpose
for (var i = 0; i < 12; i++) {
var d = new Dot();
dots.push(d);
}

 // This is the prototype fn
function draw() {

 var x = mouse.x,
  y = mouse.y;


dots.forEach(function(dot, index, dots) {
var nextDot = dots[index + 1] || dots[0];

dot.x = x;
dot.y = y;
dot.draw();
x += (nextDot.x - dot.x) * .6;
y += (nextDot.y - dot.y) * .6;

});
}

addEventListener("mousemove", function(event) {
//event.preventDefault();
mouse.x = event.pageX;
mouse.y = event.pageY;
});

// animate() calls draw() then recursively calls itself
// everytime the screen repaints via requestAnimationFrame().
function animate() {
draw();
requestAnimationFrame(animate);
}


animate();

//点是点对象的数组，
//鼠标是用于跟踪X和Y位置的对象
var dots=[]，
鼠标={
x:0,，
y:0
};
//用于构建点的点对象
var Dot=函数（）{
这个.x=0；
这个。y=0；
this.node=（函数（）{
var n=document.createElement（“div”）；
n、 className=“trail”；
document.body.appendChild（n）；
返回n；
}());
};
//绘制原型函数
Dot.prototype.draw=函数（）{
this.node.style.left=this.x+“px”；
this.node.style.top=this.y+“px”；
};
//出于您的目的，您不需要此部件
对于（变量i=0；i<12；i++）{
var d=新点（）；
点。推（d）；
}
//这是fn的原型
函数绘图（）{
var x=鼠标.x，
y=鼠标。y；
dots.forEach（函数（点、索引、点）{
var nextDot=点[指数+1]| |点[0]；
点x=x；
点y=y；
dot.draw（）；
x+=（下一个点x-点x）*.6；
y+=（下一个点y-点y）*.6；
});
}
addEventListener（“mousemove”，函数（事件）{
//event.preventDefault（）；
mouse.x=event.pageX；
mouse.y=event.pageY；
});
//animate（）调用draw（），然后递归地调用自身
//每次屏幕都通过requestAnimationFrame（）重新绘制。
函数animate（）{
draw（）；
请求动画帧（动画）；
}
制作动画（）；

当然，您不会创建点，但是上面的内容应该足以说明如何将此代码应用于目标元素

jQuery版本将不会那么冗长，我可能会在以后添加这一点

链接：

---

这与我们的发布指南有关，有几个问题。首先，它似乎相当依赖于两个环节，这两个环节会随着时间的推移而变化，因此一旦解决了，当这些环节发生变化时，这个问题可能就没有那么大的意义了。另外，如果我看到一个“逐步说明”的请求，真正请求的是一个定制的教程编写服务，而这并不是堆栈溢出的真正目的。如果你能认真尝试一下你想要的，那会更好，然后展示你的代码-这将让我们更好地了解你的一般方法。嘿，哈弗，你把我的观点搞错了。我并不是像你提到的那样要求一个循序渐进的教程。我不是这个意思。我只想给我代码，告诉我确切的位置。这就是全部。没什么复杂的！好吧，我就是这个意思。我们更喜欢“请帮助我尝试过的东西”，而不是“给我密码”——这个问题是后者。我并不是不想帮忙——至于什么是堆栈溢出的适当问题，读者在评论中给出反馈以帮助改进帖子是很正常的。为什么链接会更改或过期？嗯，这个问题在一年后仍然存在，但是

www.inpha.co

可能不会。事实上，你想让读者看看这个链接，看看哪里出了问题，但一旦你修复了它，错误的东西就不再明显了，这个问题可能就没有意义了。出于这个原因，我们说我们喜欢“独立的问题”，即读者（大部分）根本不需要访问外部链接。thx很多damiano celent。非常感谢你的工作。我将尝试一下，看看会发生什么。当然会回复反馈。达米亚诺，这看起来是个有用的答案。我们没有任何关于有用答案的指导方针，如果海报事先没有做出努力，但至少一些读者认为，这可能会鼓励更多同样口径的问题。值得铭记@halfer，这正是我没有提供产品代码的原因，甚至没有一个HTML可以这样做。提供了一个“插件”脚本：-）人们不知道从头开始编写代码会花费多少时间。让你怀疑他们是否期望它能够跨浏览器兼容和响应。。至少在发现代码中的错误时，OP、您和社区都有一个价值。干杯！干杯！干杯！干杯！干杯！干杯！干杯！干杯！干杯！干杯！干杯