我开始学习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);
};
有人可以帮我吗?我将对正确而干净的方法应该如何进行感兴趣...
谢谢!
最佳答案
我已经更改了您的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>
关于javascript - 第二只动画眼睛的重复代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36445760/