4

我要做的是一个 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而不是度数（将产生从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/

4

1 回答 1

8

经过我们俩的努力，这是一个 不使用插件且无前缀的新版本。注意：这只适用于支持 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');
    });
});
于 2013-07-22T19:16:45.087 回答