眼睛跟随鼠标光标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
});
答
这里是你可以用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)";
});
如果您的浏览器不支持传递弧度到rotate()
,您可以将其转换为度数(并在属性值中将与deg
对换)。
var deg = rad * (180/Math.PI);
眼原型对象未在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