Question

我现在想要学习很长一段时间，但一直没能弄清楚。

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

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

这是简单的事情，还是3k行？（或者也许是一个jQuery插件？）

Answer 1

Hiya通过使用我的一个旧帖子，我得到了更接近的东西：演示 http://jsfiddle.net/Z3pGQ/3/

我还在工作，如果你能在我之前改进，那么你会更轻松地点击或：

旧帖子：Rotating an element based on cursor position in a separate element

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

示例代码

$(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);
}

图片

Answer 2

这将涉及比我现在想要做的更多的数学，但你可以轻松地使用css旋转。以下是mozilla和webkit的属性，你可以看到其余的（IE，Opera ...）at this page。这是你应用了120度旋转的功能。您仍然需要计算正确的轮播，并相应地调整left和top。

$(document).mousemove(function(e){
                $(".firefly").css({
                    "top":(e.pageY*2)+"px",
                    "left":(e.pageX*2+130)+"px",
                    "-moz-transform": "rotate(120deg)",
                    "-webkit-transform": "rotate(120deg)"});
            })

Answer 3

有一个http://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/

的jQuery插件

在鼠标移动时旋转

3 个答案: