0

我将以下脚本设置为旋转页面中心的圆圈以跟随光标的移动。它最初是为了跟随封闭框中的运动而创建的，但我试图让它跟随页面周围的圆圈，但我不确定如何正确地进行，您可以分享任何见解吗？

http://coreytegeler.com/new/ 

   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)');

        }
4

1 回答 1

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 数组的长度来延长延迟。

于 2013-06-12T20:43:16.703 回答