Javascript:使两个圆圈独立地跟随光标，没有冗余

Question

我试图让下面 js fiddle 中的 yellow 和 red 圆圈独立地跟随光标，我如何概括这段代码 这样如果我添加更多圆 div 就不必复制冗余代码？

http://jsfiddle.net/fhmkf/218/

代码现在有很多简化:

// first circle variables
var center = {
    x: $(".container").width()/2 - 15, 
    y: $(".container").height()/2 - 15
};
var distanceThreshold = $(".container").width()/2 - 15;
var mouseX = 0, mouseY = 0;

// second circle variables
var center2 = {
    x2: $(".container2").width()/2 - 25, 
    y2: $(".container2").height()/2 - 25
};
var distanceThreshold2 = $(".container2").width()/2 - 25;
var mouseX2 = 0, mouseY2 = 0;


$(window).mousemove(function(e){ 
   var d = {
        x: e.pageX - center.x,
        y: e.pageY - center.y
   };
   var distance = Math.sqrt(d.x*d.x + d.y*d.y);
   if (distance < distanceThreshold) {
     mouseX = e.pageX;
     mouseY = e.pageY;
   } else {
     mouseX = d.x / distance * distanceThreshold + center.x;
     mouseY = d.y / distance * distanceThreshold + center.y;
   }

   var d2 = {
        x2: e.pageX - 200 - center2.x2,
        y2: e.pageY - 200 - center2.y2
   };
   var distance2 = Math.sqrt(d2.x2*d2.x2 + d2.y2*d2.y2);
   if (distance2 < distanceThreshold2) {
     mouseX2 = e.pageX - 200;
     mouseY2 = e.pageY - 200;
   } else {
     mouseX2 = d2.x2 / distance2 * distanceThreshold2 + center2.x2;
     mouseY2 = d2.y2 / distance2 * distanceThreshold2 + center2.y2;
   }
});

// 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) / 2;
    yp += (mouseY - yp) / 2;
    follower.css({left:xp, top:yp});

}, 30);

// cache the selector
var follower2 = $("#follower2");
var xp2 = 0, yp2 = 0;
var loop2 = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp2 += (mouseX2 - xp2) / 2;
    yp2 += (mouseY2 - yp2) / 2;
    follower2.css({left:xp2, top:yp2});

}, 30);

Answer 1

只需为您的圈子创建一个类(class):

( JSFiddle )

var Circle = function(container, follower, r){
    var center = {
        x: $(container).width()/2 - r, 
        y: $(container).height()/2 - r
    };
    var distanceThreshold = $(container).width()/2 - r;
    var mouseX = 0, mouseY = 0;

    $(window).mousemove(function(e){ 
        var d = {
            x: e.pageX - center.x,
            y: e.pageY - center.y
        };
        var distance = Math.sqrt(d.x*d.x + d.y*d.y);
        if (distance < distanceThreshold) {
            mouseX = e.pageX;
            mouseY = e.pageY;
        } else {
            mouseX = d.x / distance * distanceThreshold + center.x;
            mouseY = d.y / distance * distanceThreshold + center.y;
        }
    });

    // 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) / 2;
        yp += (mouseY - yp) / 2;
        follower.css({left:xp, top:yp});
    }, 30);
};

var c1 = new Circle(".container", "#follower", 15);
var c2 = new Circle(".container2", "#follower2", 25);

如果您想在初始化 Circle 对象后控制圆圈，请向类添加公共(public)“方法”:this.methodName = function(){ }