[英]two circles should follow the cursor – one small and one big (with delay)
[英]Javascript: making two circles follow cursor independently, without redundency
我正在嘗試在下面的js小提琴中獲得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);
只需為您的圈子創建一個班級即可:
( 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
對象初始化后控制圓,請在類中添加公共“方法”: this.methodName = function(){ }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.