我正在寻找一些代码来帮助我让页面上的眼睛跟随光标,周围有一些示例,但这个引起了我的注意:https://github.com/Goutte/Eye主要是因为它需要很少的代码。
它使用了我以前从未见过的mootools,是否可以将其转换为使用jQuery,或者有人可以准确解释这是如何使用如此少的javascript来工作的吗? mootools 内置了哪些功能可以让这件事变得如此简单?
JsFiddle: http://jsfiddle.net/B2Nza/46/
var options2 = {
socketRadius: 2, // radius of the circle in which the eye's pupil can move
bindTouchMove: true,
}
var leftEye2 = new Eye ('left_eye2', options2);
var rightEye2 = new Eye ('right_eye2', options2);
var fly2 = new Eye ('fly2', {
socketRadius: 17,
behavior: 'follow',
stickToSocket: true
});
最佳答案
以下是如何使用 JavaScript 来完成此操作。
var element = document.getElementById("leela-eye");
document.addEventListener("mousemove", function (event) {
var x = event.pageX;
var y = event.pageY;
var offsets = eye.lens.getBoundingClientRect();
var left = (offsets.left - x)
var top = (offsets.top - y)
var rad = Math.atan2(top, left);
element.style.webkitTransform = "rotate(" + rad + "rad)";
});
jsFiddle .
如果您的浏览器不支持将弧度传递给 rotate()
,您可以将其转换为度数(并将 rad
与 deg
交换在属性值中)。
var deg = rad * (180 / Math.PI);
关于javascript - 眼睛跟随鼠标光标 Mootools -> JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14835722/