眼睛跟隨鼠標光標Mootools-> JQuery

Question

我正在尋找一些代碼來幫助我使頁面跟隨光標，但是周圍有一些示例，但是這個示例引起了我的注意： 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
});

Answer 1

這是使用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);