在鼠标移动时旋转

Question

我现在想要学习很长一段时间的东西,但是还没弄清楚.

http://jsfiddle.net/Mobilpadde/Xt7ag/

然后你移动鼠标,它跟随,这是容易的部分,但我也想旋转,就像总是看向鼠标的方向,但不是那么静态,更像是,如果你移动你的鼠标,它应该有点首先旋转,然后你将鼠标移开更远,它应该再次开始(如果你知道我的意思).

那简单易行,还是3k线？(或者也许是一个jQuery插件？)

Answer 1

Hiya我通过使用我的旧帖子得到了更接近的东西:demo http://jsfiddle.net/Z3pGQ/3/

我还在工作,会给你更轻松的版本,或者如果你能在我面前改进:

旧帖子:根据单独元素中的光标位置旋转元素

希望它有所帮助,我想让它变得更加顺畅,欢呼

示例代码

$(document).ready(function() {
    $(document).mousemove(function(e) {
        $(".firefly").css({
            "top": (e.pageY * 2) + "px",
            "left": (e.pageX * 2 + 130) + "px"
        });
    })
})
var img = $(".firefly");
if (img.length > 0) {
    var offset = img.offset();

    function mouse(evt) {
        var center_x = (offset.left) + (img.width() / 2);
        var center_y = (offset.top) + (img.height() / 2);
        var mouse_x = evt.pageX;
        var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        img.css('-moz-transform', 'rotate(' + degree + 'deg)');
        img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        img.css('-o-transform', 'rotate(' + degree + 'deg)');
        img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }
    $(document).mousemove(mouse);
}?

图片