доброго времени суток!
Не пугайтесь изза количества кода, ниже я опишу где проблема у меня.
Вот всё что есть:
<html>
<head>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onload = function () {
var r = Raphael("holder", 800, 600),
R = 150,
angleVal = 0,
drawPath = new Array(),
rand = 90,
valArray=[
["text1",7187, 4960.12, "#33a1e0"],
["text2",7165, 6074.55, "#34d0e1"],
["text3",7031, 5075.65, "#34e1c7"],
["text4",5995, 9319.85, "#34e1ae"],
["text5", 9035,4699.03, "#d3e134"],
["text6", 9185, 4291.04, "#e19c34"]];
for(c=0,ttl=0;c<valArray.length;c++){ //Вычисляем капитал:
ttl += valArray[c][2];
}
//создаём текстовую переменную
title = r.text(400, 300, ttl).attr({font: '35px Lucida Grande', fill: '#0b668f', "font-weight": "bold"}).toFront();
//параметры дуг
r.customAttributes.arc = function(value, rad, makeAir){
var alpha = 3.6 * (value/(ttl/100)),
angle = (360)/ttl*(makeAir),
a = (rand-angle-alpha) * Math.PI/180,
b = (rand-angle) * Math.PI/180,
sx = 400 + rad * Math.cos(b),
sy = 300 - rad * Math.sin(b),
x = 400 + rad * Math.cos(a),
y = 300 - rad * Math.sin(a),
path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
return {path: path};
};
for(p=0;p<valArray.length;p++){
// создаём дуги
drawPath[p] = r.path().attr({arc: [0, 0, 0], "stroke-width": 0, stroke: "#fff"});
// Передаём в функцию анимированного появления дуги
updateVal(valArray[p][2], R, angleVal, drawPath[p], valArray[p][3]);
//Переменная отступа от начала координат
angleVal = angleVal+valArray[p][2];
}
//функция анимирующая появление дуг к назначеным параметрам
function updateVal(value, rad0, angle0, hand, color) {
hand.animate({arc: [value, rad0, angle0], 'stroke-width': 90, stroke: color }, 1900, "<>");
}
// Анимировать появление к заданным параметрам
for(i=0;i<valArray.length;i++){
drawPath[i].mouseover(function(){ // При наведении анимированно увеличить кнопки
this.toFront();
this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
// При наведении ищменить текст
title.stop().animate({ opacity: 0 }, 200, "<>", function(){
title.attr({ text: "i = "+i }).animate({ opacity: 1 }, 200, "<>");
});
});
drawPath[i].mouseout(function(){ // При отводе курсора анимированно вернуть размеры кнопок
this.animate({'stroke-width': 90, opacity: .8}, 1000, "elastic");
title.stop().animate({ opacity: 0 }, 200, '<>', function(){
title.attr({ text: ttl }).animate({ opacity: 1 }, 200, '<>');
});
});
}
}
</script>
<div id="holder"></div>
</body>
</html>
Вот в этом месте я стараюсь чтоб после наведения на любую кнопку, в центре выводилось её число « i », постарался записать это для каждой кнопки через цикл, но в итоге он везде выводит конечное значение i = 6.
(а хотелосьбы чтобы писал и 1, и 2, и 3,.... у каждой своё)
for(i=0;i<valArray.length;i++){
drawPath[i].mouseover(function(){ // При наведении анимированно увеличить кнопки
this.toFront();
this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
// При наведении ищменить текст
title.stop().animate({ opacity: 0 }, 200, "<>", function(){
title.attr({ text: "i = "+i }).animate({ opacity: 1 }, 200, "<>");
});
});
drawPath[i].mouseout(function(){ // При отводе курсора анимированно вернуть размеры кнопок
this.animate({'stroke-width': 90, opacity: .8}, 1000, "elastic");
title.stop().animate({ opacity: 0 }, 200, '<>', function(){
title.attr({ text: ttl }).animate({ opacity: 1 }, 200, '<>');
});
});
}
}
я могу для каждой в отдельности прописать это както так (для примера):
drawPath[0].mouseover(function(){
this.toFront();
this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
title.stop().animate({ opacity: 0 }, 200, "<>", function(){
title.attr({ text: "i = "+0 }).animate({ opacity: 1 }, 200, "<>");
});
});
drawPath[1].mouseover(function(){
this.toFront();
this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
title.stop().animate({ opacity: 0 }, 200, "<>", function(){
title.attr({ text: "i = "+1 }).animate({ opacity: 1 }, 200, "<>");
});
});
drawPath[2].mouseover(function(){
this.toFront();
this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
title.stop().animate({ opacity: 0 }, 200, "<>", function(){
title.attr({ text: "i = "+2 }).animate({ opacity: 1 }, 200, "<>");
});
});
.......
но это увеличит количество кода.
как мне это автоматизировать?