Javascript: следуйте за курсором, но оставайтесь внутри круга, в отличие от прямоугольника div

Question

Javascript: следуйте за курсором, но оставайтесь внутри круга, в отличие от прямоугольника div

0

Я пытаюсь получить образец jsfiddle ниже, чтобы сделать желтый круг div следующим за мышью, но ограничиться кругом, а не квадратом (div).

http://jsfiddle.net/fhmkf/

Код JS выглядит так:

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX, limitX);
   mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);

Я понимаю структуру и методологию кода, просто не слишком знакомые с синтаксисом!

Где лучше всего обновить limitX/Y и выбросить лишний radius, переменные distance?

Serge P 05 окт. 2013, в 19:05

Источник

1

как то так ?
GuiDocs 05 окт. 2013, в 16:41

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

nkron · Accepted Answer · 2013-10-05T15-42-00.000Z

Вы можете сделать это, вычислив расстояние от центра круга (2D-расстояния вычисляются с помощью Math.sqrt (x * x + y * y)). Затем проверьте, превышает ли расстояние больше радиуса круга, на который вы хотите ограничить. Если это так, уменьшите расстояние до вашего ограничивающего радиуса.

Вот фрагмент:

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
var centerX = limitX / 2, centerY = limitY / 2;
var radius = centerX;
$(window).mousemove(function(e) {
   var diffX = e.pageX - centerX;
   var diffY = e.pageY - centerY;

   // Get the mouse distance from the center
   var r = Math.sqrt(diffX * diffX + diffY * diffY);

   if (r > radius) {
     // Scale the distance down to length 1 
     diffX /= r;
     diffY /= r;

     // Scale back up to the radius
     diffX *= radius;
     diffY *= radius;
   }

   mouseX = centerX + diffX;
   mouseY = centerY + diffY;
});

И вот полный код: http://jsfiddle.net/fhmkf/