Question

我将以下脚本设置为旋转页面中心的圆圈以跟随光标的移动。它最初创建是为了跟随一个包含框中的移动，但我试图让它跟随整个页面的圆圈，但我不确定如何正确地进行，你可以分享的任何见解？

   var circle = $('#circle');
   var offset = circle.offset();

        function mouse(e) {

            var center_x = (offset.left) + ( $('#home').width() / 2 );
            var center_y = (offset.top) + ( $('#home').height() / 2 );
            var mouse_x = e.pageX; 
            var mouse_y = e.pageY;

            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 180; 

            circle.css('-moz-transform', 'rotate('+degree+'deg)');
            circle.css('-webkit-transform', 'rotate('+degree+'deg)');
            circle.css('-o-transform', 'rotate('+degree+'deg)');
            circle.css('-ms-transform', 'rotate('+degree+'deg)');

        }

Answer 1

这应该有效：

var circle = $('#circle');
var circleCenterX = circle.width() / 2; //Calculate these once
var circleCenterY = circle.height() / 2;
var offset = circle.offset();

function mouse(e) {

    var center_x = (offset.left) + ( circleCenterX );
    var center_y = (offset.top) + ( circleCenterY );
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY;

    var radians = Math.atan2(mouse_x - center_x, center_y - mouse_y); //y is backwards from cartesian coordinate system. No need to convert to degrees.

    circle.css('-moz-transform', 'rotate('+radians+'rad)');
    circle.css('-webkit-transform', 'rotate('+radians+'rad)');
    circle.css('-o-transform', 'rotate('+radians+'rad)');
    circle.css('-ms-transform', 'rotate('+radians+'rad)');

}

或者，如果你想延迟（使用更清晰的代码）：

var circle = $('#circle');
var circleCenterX = circle.width() / 2;
var circleCenterY = circle.height() / 2;
var offset = circle.offset();
var radiansSet = new Array(9);
var radiansIntervalID = undefined;
var radians;

function mouse(e) {

    var center_x = offset.left + circleCenterX;
    var center_y = offset.top + circleCenterY;
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY;

    radians = Math.atan2(mouse_x - center_x, center_y - mouse_y);

    if(radiansIntervalID === undefined) { //If not running the timer & mouse moved, start it!
        radiansIntervalID = setInterval(adjusterInterval, 20);
    }
}

var adjusterInterval = function() { //Interval to help rotate with slight delay
    var i = 0, len = radiansSet.length;
    var lastRad = radians;
    var anyDifferent = false;

    while(i < len - 1) { //Move down list of last checked mouse positions & check to see if different in 9 iterations.
        if(!anyDifferent && radiansSet[i] != lastRad) {
            anyDifferent = true;
        }
        radiansSet[i] = radiansSet[i + 1];
        lastRad = radiansSet[i];
        i++;
    }

    radiansSet[len - 1] = radians; //Append to last in list

    if(radiansSet[0] !== undefined) { //Change the first in the list (8 iterations ago)
        circle.css('-moz-transform', 'rotate(' + radiansSet[0] + 'rad)');
        circle.css('-webkit-transform', 'rotate(' + radiansSet[0] + 'rad)');
        circle.css('-o-transform', 'rotate(' + radiansSet[0] + 'rad)');
        circle.css('-ms-transform', 'rotate(' + radiansSet[0] + 'rad)');
    }

    if(!anyDifferent) { //If not changed....
        clearInterval(radiansIntervalID); //Turn off timer to save CPU
        radiansIntervalID = undefined;
    }
};

在我的开发中测试过，它对我来说很好。请注意，您可以通过减少间隔长度使动画更平滑，并通过增加radiansSet数组的长度来延长延迟。

图像根据鼠标位置旋转

1 个答案: