javascript - 第二只动画眼睛的重复代码

Question

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

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

http://codepen.io/GottZ/pen/XbxBXw

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);
};

有人可以帮我吗？我会对正确和干净的方式感兴趣......

谢谢!

Answer 1

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

  $(function () {

            var eyeL;
            var n_eyeL = document.querySelector(".eyeL");
            var n_irisL = n_eyeL.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 = function () {
                eyeL = {
                    x: n_eyeL.offsetLeft + sizeL / 2,
                    y: n_eyeL.offsetTop + sizeL / 2
                };
                eyeR = {
                    x: n_eyeR.offsetLeft + sizeR / 2,
                    y: n_eyeR.offsetTop + sizeR / 2
                };
            })();

            window.onmouseout = window.onmouseleave = function () {
                n_irisL.setAttribute("class", "irisL anim");
                n_irisR.setAttribute("class", "irisR anim");
            };

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

            window.onmousemove = function (e) {
                n_irisL.setAttribute("class", "irisL");
                n_irisR.setAttribute("class", "irisR");
                var m = {
                    x: e.clientX - eyeL.x,
                    y: e.clientY - eyeL.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_irisL.style.transform = "rotateX(" + m.rx + "deg) rotateY(" + m.ry + "deg) translateZ(68px) scale(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(function (r) {
                    m[r] *= 0.1;
                    m[r] = Math.max(-60, m[r]);
                    m[r] = Math.min(60, m[r]);
                });
                n_irisR.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);
            };
        });

 html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  background-color: #333;
  position: absolute;
}

.eyeL {
  width: 150px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 270px);
  background-color: #ffefe2;
  box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  position: absolute;
  -webkit-perspective: 500px;
          perspective: 500px;
  overflow: hidden;
}
.eyeR {
  width: 150px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 55px);
  background-color: #ffefe2;
  box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  position: absolute;
  -webkit-perspective: 500px;
          perspective: 500px;
  overflow: hidden;
}

.eyeL .irisL {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
          transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  background: -webkit-radial-gradient(center ellipse, #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%);
  background: radial-gradient(ellipse at center, #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%);
  border-radius: 100%;
}






.eyeR .irisR {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
          transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  background: -webkit-radial-gradient(center ellipse, #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%);
  background: radial-gradient(ellipse at center, #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%);
  border-radius: 100%;
}



















.eyeL .irisL.anim {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: irisL;
          animation-name: irisL;
}




.eyeR .irisR.anim {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: irisR;
          animation-name: irisR;
}

@-webkit-keyframes irisL {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

@keyframes irisL {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

@-webkit-keyframes irisR {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

@keyframes irisR {
  0%, 100% {
    -webkit-transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    -webkit-transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    -webkit-transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
            transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    -webkit-transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
            transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
            transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    -webkit-transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
            transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="eyeL">
        <div class="irisL anim">
        </div>
    </div>
    <div class="eyeR">
        <div class="irisR anim">
        </div>
    </div>