Javascript 第二个动画眼睛的重复代码

我开始学习javascript，并尝试在codepen上扩展代码

现在我正试图在这里复制这只眼睛，以便两只眼睛跟随我的光标。我开始用不同的变量和关键帧动画复制整个功能，但我想这不是正确的方法，也不起作用

有人能帮我吗？我会在正确和干净的方式，这应该如何做感兴趣

---

谢谢

我已经更改了您的css jqquery和html。看一看。根据需要改变眼睛的位置

$（函数（）{
眼变位；
var n_yell=document.querySelector（“.yell”）；
var n_irisL=n_eyle.querySelector（“.irisL”）；
var sizeL=n_eyeL.clientWidth；
var eyeR；
var n_eyeR=document.querySelector（“.eyeR”）；
var n_irisR=n_eyeR.querySelector（“.irisR”）；
var sizeR=n_eyeR.clientWidth；
（window.onresize=函数（）{
孔眼={
x:n_eyle.offsetLeft+sizeL/2，
y:n_eyle.offsetop+sizeL/2
};
眼睛={
x:n_eyeR.offsetLeft+sizeR/2，
y:n_eyeR.offsetTop+sizeR/2
};
})();
window.onmouseout=window.onmouseleave=function（）{
n_irisL.setAttribute（“类”、“irisL动画”）；
n_irisR.setAttribute（“类”、“irisR动画”）；
};
window.ontouchend=函数（e）{
如果（e.touchs.length==0）window.onmouseout（）；
}
window.onmousemove=函数（e）{
n_irisL.setAttribute（“类”、“irisL”）；
n_irisR.setAttribute（“类”、“irisR”）；
var m={
x:e.clientX-yell.x，
y:e.clientY-eyeL.y
};
m、 rx=0-m.y；
m、 ry=m.x；
[“rx”，“ry”].forEach（函数（r）{
m[r]*=0.1；
m[r]=数学最大值（-60，m[r]）；
m[r]=数学最小值（60，m[r]）；
});
n_irisL.style.transform=“rotateX（+m.rx+”deg）rotateY（+m.ry+”deg）translateZ（68px）刻度（0.6）”；
var m={
x:e.clientX-eyeR.x，
y:e.clientY-eyeR.y
};
m、 rx=0-m.y；
m、 ry=m.x；
[“rx”，“ry”].forEach（函数（r）{
m[r]*=0.1；
m[r]=数学最大值（-60，m[r]）；
m[r]=数学最小值（60，m[r]）；
});
n_irisR.style.transform=“rotateX（+m.rx+”deg）rotateY（+m.ry+”deg）translateZ（68px）刻度（0.6）”；
};
window.ontoochmove=window.ontoochstart=function（e）{
var-touch=e.touch[0]；
window.onmousemove（触摸）；
};
});
html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
背景色：#333；
位置：绝对位置；
}
埃利先生{
宽度：150px；
高度：150像素；
顶部：钙（50%-75px）；
左：计算（50%-270px）；
背景色：#ffefe2；
框阴影：插入0 0 60px 0 rgba（0,0,0,0.5）；
边界半径：100%；
位置：绝对位置；
-webkit透视图：500px；
透视图：500px；
溢出：隐藏；
}
埃耶先生{
宽度：150px；
高度：150像素；
顶部：钙（50%-75px）；
左：计算（50%-55px）；
背景色：#ffefe2；
框阴影：插入0 0 60px 0 rgba（0,0,0,0.5）；
边界半径：100%；
位置：绝对位置；
-webkit透视图：500px；
透视图：500px；
溢出：隐藏；
}
眼虹膜{
宽度：100%；
身高：100%；
最高：0%；
左：0%；
位置：绝对位置；
-webkit变换：rotateX（-50度）rotateY（15度）translateZ（68像素）比例（0.6）；
变换：rotateX（-50度）rotateY（15度）TRANSTALEZ（68像素）比例（0.6）；
背景：-webkit径向梯度（中心椭圆，#000000 13%，#cedbe9 15%，#cedbe9 15%，#b1d1e0 25%，#85b5e5 44%，#6199c7 51%，#fffcf9 53%，rgba（255,252,249,0.4）56%，rgba（0,0,0）71%）；
背景：径向梯度（中心椭圆，#000000 13%，#cedbe9 15%，#cedbe9 15%，#b1d1e0 25%，#85b5e5 44%，#6199c7 51%，#fffcf9 53%，rgba（255,252,249,0.4）56%，rgba（0,0,0,0）71%）；
边界半径：100%；
}
艾尔·伊里尔先生{
宽度：100%；
身高：100%；
最高：0%；
左：0%；
位置：绝对位置；
-webkit变换：rotateX（-50度）rotateY（15度）translateZ（68像素）比例（0.6）；
变换：rotateX（-50度）rotateY（15度）TRANSTALEZ（68像素）比例（0.6）；
背景：-webkit径向梯度（中心椭圆，#000000 13%，#cedbe9 15%，#cedbe9 15%，#b1d1e0 25%，#85b5e5 44%，#6199c7 51%，#fffcf9 53%，rgba（255,252,249,0.4）56%，rgba（0,0,0）71%）；
背景：径向梯度（中心椭圆，#000000 13%，#cedbe9 15%，#cedbe9 15%，#b1d1e0 25%，#85b5e5 44%，#6199c7 51%，#fffcf9 53%，rgba（255,252,249,0.4）56%，rgba（0,0,0,0）71%）；
边界半径：100%；
}
.eyeL.irisL.anim{
-webkit动画持续时间：10秒；
动画持续时间：10秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画名称：irisL；
动画名称：irisL；
}
eyeR.irisR.anim先生{
-webkit动画持续时间：10秒；
动画持续时间：10秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画名称：irisR；
动画名称：irisR；
}
@-webkit关键帧irisL{
0%, 100% {
-webkit变换：rotateX（-10度）rotateY（15度）translateZ（68像素）比例（0.6）；
变换：rotateX（-10度）rotateY（15度）translateZ（68像素）比例（0.6）；
}
10% {
-webkit变换：rotateX（-50度）rotateY（15度）translateZ（68像素）比例（0.6）；
转变：腐烂
var eye;
var n_eye = document.querySelector(".eye");
var n_iris = n_eye.querySelector(".iris");
var size = n_eye.clientWidth;

(window.onresize = function () {
    eye = {
        x: n_eye.offsetLeft + size / 2,
        y: n_eye.offsetTop + size / 2
    };
})();

window.onmouseout = window.onmouseleave = function () {
    n_iris.setAttribute("class", "iris anim");
};

window.ontouchend = function (e) {
    if (e.touches.length == 0) window.onmouseout();
}

window.onmousemove = function (e) {
    n_iris.setAttribute("class", "iris");
    var m = {
        x: e.clientX - eye.x,
        y: e.clientY - eye.y
    };
    m.rx = 0 - m.y;
    m.ry = m.x;
    ["rx", "ry"].forEach(function (r) {
        m[r] *= 0.1;
        m[r] = Math.max(-60, m[r]);
        m[r] = Math.min(60, m[r]);
    });
    n_iris.style.transform = "rotateX("+m.rx+"deg) rotateY("+m.ry+"deg) translateZ(68px) scale(0.6)";
};

window.ontouchmove = window.ontouchstart = function (e) {
    var touch = e.touches[0];
    window.onmousemove(touch);
};