Question

我想要做的是一个jQuery脚本，它根据浏览器窗口中的光标位置旋转div中的元素。

比例如下：

maximum_pixels_x-axys：2°= center_pixels_x-axys：0°

和y轴相同。

如果光标位于屏幕中央，则无法旋转。如果它在其他地方，它必须从0°旋转到2°（或负值，取决于相对笛卡尔平面中屏幕的位置）。所以这是一个动态轮换，有即时反馈。

与您在此处看到的内容类似：http://css3playground.com/flashlight.php（从菜单中选择“斜角”），但使用transform:rotate代替text-shadow。

现在我尝试使用transit.js，使用sin e cos而不是degree（将导致从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/

Answer 1

经过我们双方的一些工作，here is a new version 不使用插件，前缀免费。 注意：这仅适用于支持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');
    });
});

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

1 个答案: