2

很久以前就想学的东西，一直没搞明白。

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

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

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

4

3 回答 3

6

嗨，我通过使用我的旧帖子更接近了它：演示 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);
}​

图片

在此处输入图像描述

于 2012-06-23T03:50:51.783 回答
0

这将涉及比我现在想做的更多的数学运算，但是您可以轻松地使用 css 应用旋转。以下是 mozilla 和 webkit 的属性，您可以在此页面查看 (IE,Opera...) 的其余部分。这是应用了 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)"});
            })
于 2012-06-23T03:43:34.227 回答
0

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

于 2014-02-04T15:04:49.753 回答