使用jQuery根据鼠标位置旋转元素

Question

使用jQuery根据鼠标位置旋转元素

jqueryrotationtransitioncss-transformscursor-position

4

我想做一个jQuery脚本，可以根据浏览器窗口中鼠标的位置旋转div内的元素。

比例大致为：

最大像素x轴：2° = 中心像素x轴：0°

y轴同理。

如果光标位于屏幕中心，则不进行旋转。否则，必须将其从0°旋转到2°（或根据相对笛卡尔平面上的屏幕位置而定的负值）。因此，这是一种具有即时反馈的动态旋转。

就像您在这里看到的：http://css3playground.com/flashlight.php（从菜单中选择“斜角”），但使用transform:rotate而不是text-shadow。

现在我尝试使用transit.js，使用sin和cos代替度数（从0到1的“度数”将产生结果）。我知道这不是正确的方法，但这是我想象中获得低度数的最接近方法。

var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);

$(document).mousemove(function(e) {
    var mouse_x = e.pageX,
    mouse_y = e.pageY,
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
    cos = (mouse_x-center_x)/hypotenuse,
    sin = (mouse_y-center_y)/hypotenuse;
    $('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos });
});

但是结果并不是我所期望的。div元素旋转了（但是是错误的方向），但是没有动态效果。

我该怎么做？

示例： http://jsfiddle.net/lucgenti/LtWtW/11/

- lucgenti

添加了fiddle链接。我不知道为什么它不起作用，因为在我的本地文件夹中它可以工作（就像我说的那样是错误的）。 - lucgenti

小提琴已经修正。通过左侧菜单中的“外部资源”加载过渡效果。你认为这就是过渡效果太重的原因吗？现在我尝试使用简单的CSS操作。 - lucgenti

当我将延迟设置在500毫秒以下时，我的浏览器似乎会出现滞后。 - Zach Saucier

如果您要使用CSS3 3D动画，请查看此链接：http://css3.bradshawenterprises.com/transforms/ - Zach Saucier

谢谢Zeaklous，现在我明白了：我对浏览器的要求太高了。现在我需要一种正确编码旋转的方法。也许你理解我所问的：divs“看”鼠标的方向。度数取决于窗口中心的距离。如何将其转换为“度数”值？（当然，x和y应该是不同的） - lucgenti

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

经过我们的努力，这里有一个新版本，它不使用插件，并且没有前缀。请注意：这仅适用于支持 CSS 变换的浏览器。

以下是我用来实现此行为的 jQuery 代码：

$(document).ready(function () {
    var $one = $('#div1'),
        $two = $('#div2'),
        browserPrefix = "",
        usrAg = navigator.userAgent;
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
        browserPrefix = "-webkit-";
    } else if (usrAg.indexOf("Opera") > -1) {
        browserPrefix = "-o";
    } else if (usrAg.indexOf("Firefox") > -1) {
        browserPrefix = "-moz-";
    } else if (usrAg.indexOf("MSIE") > -1) {
        browserPrefix = "-ms-";
    }

    $(document).mousemove(function (event) {
        var cx = Math.ceil(window.innerWidth / 2.0),
            cy = Math.ceil(window.innerHeight / 2.0),
            dx = event.pageX - cx,
            dy = event.pageY - cy,
            tiltx = (dy / cy),
            tilty = - (dx / cx),
            radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
            degree = (radius * 15);

            shadx = degree*tiltx;   /*horizontal shadow*/
            shady = degree*tilty;   /*vertical shadow*/

        $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
        $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

        if(dx>cx) /*without that horizontal values are reversed*/
            $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A');
        else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A');
    });
});