干杯，
对于我的网站，我尝试为我的简历增添一点趣味。
如果您将鼠标悬停在我创建为对象的 canvas_2 上的图标上，则静态形状 + 动态消息将出现在 canvas_3 上（canvas_1 仅用于导航，此时无关紧要）。但是，如果我将鼠标悬停在第一个对象上，则第二个对象（而不是第一个对象）会触发其动画并显示描述。
我设置了一个小提琴，也许这会比我的英语更清楚。
function Achievement(set, rect, circ, symb, label, text, icon)
{
var ach = this;
ach.set = set;
ach.rect = rect;
ach.circ = circ;
ach.symb = symb;
ach.lab = label;
ach.desText = text;
ach.desIcon = icon;
ach.builder = function()
{
ach.cir = canvas_2.path(circ);
ach.sym = canvas_2.path(symb);
ach.set.push(ach.rect, ach.sym, ach.cir);
ach.set.attr({"stroke":"none", "fill":"rgb(238, 238, 238)"});
ach.rect.attr({"opacity":0});
}
ach.hoverSetup = function()
{
ach.set.mouseover(
function(){
ach.set.forEach(function(el){el.animate(el.transform("s1.25"), "bounce")});
achTemplate.attr({"opacity":1});
ach.description.attr({"opacity":1});
}
);
ach.set.mouseout(
function(){ach.set.forEach(function(el){el.animate(el.transform("s1"), "elastic")});
achTemplate.attr({"opacity":0});
ach.description.attr({"opacity":0});
}
)
}
ach.descriptor = function()
{
canvas_3.setStart();
ach.des = canvas_3.text(320, 60, ach.desText);
ach.ico = canvas_3.path(ach.desIcon).attr({"stroke":"none"});
ach.description = canvas_3.setFinish();
ach.description.attr({"font-family":"cabinregular", "font-size":"14px", "fill":"rgb(25,106,141)", "text-anchor":"start", "opacity":0});
}
console.log(ach.set);
return ach;
}
/*Static Content*/
var title = canvas_2.text(200, 20, 'Achievements');
title.attr({"font-family": 'franchiseregular',"font-size": '24','stroke-width': '0','stroke-opacity': '1','fill': 'rgb(238,238,238)'});
var achTemplate = canvas_3.set();
var templ = canvas_3.path("M635.5,57c0,27.615-18.851,50-42.105,50H277.605c-23.253,0-42.105-22.385-42.105-50l0,0 c0-27.613,18.853-50,42.105-50h315.789C616.649,7,635.5,29.387,635.5,57L635.5,57z");templ.attr({"stroke":"none", "fill":"rgb(238,238,238)"});
var templHe = canvas_3.text(410, 20, "Achievement Unlocked");
templHe.attr({"font-family":"cabinsemibold", "font-size":"18px", "fill":"rgb(25, 106, 141)", "font-weight":"bold" });
var tempCir = canvas_3.path("M260.75,55.884c0-0.714,0.04-1.417,0.117-2.111l-10.838-3.522c-0.346,1.824-0.529,3.707-0.529,5.633 c0,8.626,3.644,16.404,9.472,21.875l6.696-9.217C262.614,65.206,260.75,60.762,260.75,55.884z M298.25,55.884 c0,4.877-1.863,9.322-4.918,12.658l6.695,9.217c5.828-5.471,9.473-13.248,9.473-21.875c0-1.926-0.184-3.809-0.531-5.632 l-10.84,3.521C298.21,54.466,298.25,55.169,298.25,55.884z M283.25,37.509c5.387,1.093,9.934,4.495,12.566,9.131l10.84-3.521 c-4.29-9.107-13.024-15.706-23.406-17.003V37.509z M263.184,46.642c2.631-4.634,7.18-8.037,12.566-9.131V26.117 c-10.382,1.297-19.116,7.896-23.404,17.004L263.184,46.642z M287.266,72.954c-2.365,1.078-4.992,1.68-7.766,1.68 c-2.773,0-5.4-0.602-7.766-1.68l-6.698,9.217c4.29,2.365,9.219,3.713,14.463,3.713s10.174-1.348,14.464-3.713L287.266,72.954z");
tempCir.attr({"stroke":"none", "fill":"rgb(25, 106, 141)"});
achTemplate.push(templ, templHe, tempCir);
achTemplate.attr({"opacity":0});
var tooltip = canvas_3.path("M34.308,44c-3.472,0-6.737,1.352-9.192,3.808c-2.456,2.455-3.808,5.721-3.808,9.192s1.352,6.737,3.808,9.192 C27.57,68.648,30.836,70,34.308,70s6.737-1.352,9.192-3.808c2.456-2.455,3.808-5.721,3.808-9.192s-1.352-6.737-3.808-9.192 C41.045,45.352,37.779,44,34.308,44z M34.308,41L34.308,41c8.837,0,16,7.163,16,16s-7.163,16-16,16s-16-7.163-16-16 S25.471,41,34.308,41z M32.308,63h4v4h-4V63z M32.308,47h4v12h-4V47z");
tooltip.attr({"stroke":"none", "fill":"rgb(238, 238, 238)", "title":"Hover over the Symbols to get more Information"});
/*Berlin Achievement */
var ber = canvas_2.set();
var selBe = canvas_2.rect(89.466, 109, 60.001, 60);
var berlin = Achievement
(
ber,
selBe,
"M100.92,138.885c0-0.714,0.039-1.417,0.117-2.111L90.2,133.251c-0.347,1.824-0.529,3.707-0.529,5.633 c0,8.626,3.644,16.404,9.472,21.875l6.696-9.217C102.784,148.207,100.92,143.763,100.92,138.885z M138.42,138.885 c0,4.877-1.863,9.322-4.918,12.658l6.695,9.217c5.828-5.471,9.473-13.248,9.473-21.875c0-1.926-0.184-3.809-0.531-5.632 l-10.84,3.521C138.381,137.467,138.42,138.169,138.42,138.885z M123.42,120.51c5.387,1.093,9.934,4.495,12.566,9.131l10.84-3.521 c-4.289-9.107-13.023-15.706-23.406-17.003V120.51z M103.354,129.642c2.631-4.634,7.18-8.037,12.566-9.131v-11.395 c-10.383,1.297-19.116,7.896-23.404,17.004L103.354,129.642z M127.436,155.955c-2.365,1.078-4.992,1.68-7.766,1.68 s-5.4-0.602-7.766-1.68l-6.699,9.217c4.291,2.365,9.22,3.713,14.463,3.713c5.246,0,10.176-1.348,14.465-3.713L127.436,155.955z",
"M119.67,126.938c-4.143,0-7.5,3.357-7.5,7.5c0,7.5,7.5,16.5,7.5,16.5s7.5-9,7.5-16.5 C127.17,130.295,123.813,126.938,119.67,126.938z M119.67,139.033c-2.537,0-4.594-2.057-4.594-4.594s2.057-4.594,4.594-4.594 s4.594,2.057,4.594,4.594S122.208,139.033,119.67,139.033z M116.765,134.438c0,1.605,1.301,2.906,2.906,2.906 c1.604,0,2.905-1.301,2.905-2.906s-1.301-2.906-2.905-2.906C118.065,131.533,116.765,132.833,116.765,134.438z",
"The Passenger",
"250G - The Passenger \n Moved to Berlin \n Unlocked on 09/08/2004",
"M279.764,44.938c-4.143,0-7.5,3.357-7.5,7.5c0,7.5,7.5,16.5,7.5,16.5s7.5-9,7.5-16.5 C287.264,48.295,283.906,44.938,279.764,44.938z M279.764,57.031c-2.537,0-4.594-2.056-4.594-4.593s2.057-4.594,4.594-4.594 s4.594,2.057,4.594,4.594S282.301,57.031,279.764,57.031z M276.858,52.438c0,1.605,1.301,2.906,2.906,2.906 c1.605,0,2.906-1.301,2.906-2.906s-1.301-2.906-2.906-2.906C278.159,49.532,276.858,50.833,276.858,52.438z"
);
berlin.builder();
berlin.hoverSetup();
berlin.descriptor();
/*Python Achievement */
var py = canvas_2.set();
var selPy = canvas_2.rect(89.795, 362.5, 60, 60);
var python = Achievement
(
py,
selPy,
"M101.045,392.384c0-0.713,0.04-1.416,0.117-2.109l-10.839-3.521c-0.347,1.824-0.528,3.707-0.528,5.633 c0,8.627,3.645,16.405,9.473,21.876l6.695-9.217C102.91,401.706,101.045,397.262,101.045,392.384z M138.545,392.384 c0,4.878-1.863,9.322-4.918,12.659l6.695,9.217c5.828-5.471,9.473-13.249,9.473-21.876c0-1.926-0.184-3.809-0.531-5.631 l-10.84,3.521C138.506,390.966,138.545,391.669,138.545,392.384z M123.545,374.009c5.387,1.094,9.934,4.496,12.566,9.132 l10.84-3.521c-4.289-9.107-13.023-15.707-23.406-17.004V374.009z M103.48,383.142c2.631-4.635,7.18-8.037,12.564-9.131v-11.395 c-10.382,1.297-19.115,7.896-23.402,17.004L103.48,383.142z M127.561,409.455c-2.363,1.078-4.99,1.68-7.766,1.68 c-2.771,0-5.398-0.602-7.767-1.68l-6.697,9.217c4.29,2.365,9.22,3.713,14.463,3.713c5.245,0,10.175-1.348,14.464-3.713 L127.561,409.455z",
"M127.295,390.938h-1.5v-4.5c0-3.313-2.688-6-6-6s-6,2.688-6,6v4.5h-1.5c-0.824,0-1.5,0.678-1.5,1.5v10.5 c0,0.825,0.676,1.501,1.5,1.501h15c0.824,0,1.5-0.676,1.5-1.501v-10.5C128.795,391.614,128.119,390.938,127.295,390.938z M119.795,399.938c-0.828,0-1.5-0.671-1.5-1.5c0-0.828,0.672-1.5,1.5-1.5c0.83,0,1.5,0.672,1.5,1.5 C121.295,399.268,120.625,399.938,119.795,399.938z M122.795,390.938h-6v-4.5c0-1.652,1.348-3,3-3c1.654,0,3,1.348,3,3V390.938z",
"Rattlesnake",
"250G - Rattlesnake \n Mastering Python \n Not yet Unlocked",
"M287.264,54.5h-1.5V50c0-3.313-2.688-6-6-6c-3.313,0-6,2.687-6,6v4.5h-1.5c-0.824,0-1.5,0.676-1.5,1.5v10.5 c0,0.824,0.676,1.5,1.5,1.5h15c0.824,0,1.5-0.676,1.5-1.5V56C288.764,55.176,288.088,54.5,287.264,54.5z M279.764,63.5 c-0.829,0-1.5-0.671-1.5-1.5s0.671-1.5,1.5-1.5s1.5,0.671,1.5,1.5S280.593,63.5,279.764,63.5z M282.764,54.5h-6V50 c0-1.654,1.346-3,3-3c1.654,0,3,1.346,3,3V54.5z"
);
python.builder();
python.hoverSetup();
python.descriptor();
}