眼睛跟随鼠标光标Mootools - > jQuery

我正在寻找一些代码来帮助我在一个页面上的眼睛跟随光标，有几个例子，但这一个引起我注意：https://github.com/Goutte/Eye主要是因为它需要这么少的代码。眼睛跟随鼠标光标Mootools - > jQuery

它使用我以前从未看过的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 
});

来源

2013-02-12 mao

眼原型对象未在MooTools的定义，它被定义如下：https://raw.github.com/Goutte/Eye/master/Source/Eye.js – 2013-02-12 15:40:18

@AndrewMoore好，我觉得挺愚蠢的，我没有看到它在jsfiddle中的任何地方连接？ – mao 2013-02-12 15:45:56

如果你想jQuery可能看看这个：http://www.senamion.com/blog/jeye.html – gulty 2013-02-12 16:09:55

这里是你可以用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()，您可以将其转换为度数（并在属性值中将与deg对换）。

var deg = rad * (180/Math.PI);

来源

2013-07-21 11:36:37 alex

眼睛跟随鼠标光标Mootools - > jQuery

回答

相关问题