- 地图对应的数据
/*svg地图*/ var classObj = [ {name: "qingqi", place: "青岐村委", color: "#f6510d", orgTotal: 987, orgPerson: "张三丰"}, {name: "mumian", place: "木棉村委", color: "#a07000", orgTotal: 187, orgPerson: "乔峰1"} ];
- 执行操作事件
//执行操作事件; for (var i = 0; i < classObj.length; i++) { (function () { var option = "." + classObj[i].name; var color = classObj[i].color; var place = classObj[i].place; var orgTotal = classObj[i].orgTotal; var orgPerson = classObj[i].orgPerson; $(option).each(function (index, element) { element.onmouseover = function () { var className = "." + this.className.animVal; $(className).each(function (index, elem) { elem.style.fill = "#031a78"; $(className).filter("text")[0].style.fill = "#fff"; }) //显示当前区域信息; $("#tips").css("display", "block"); $("#orgName").html(place); $("#orgTotal").html(orgTotal); $("#orgPerson").html(orgPerson); } element.onmouseout = function () { this.style.fill = color; var className = "." + this.className.animVal; $(className).each(function (index, elem) { elem.style.fill = color; $(className).filter("text")[0].style.fill = "#fff"; }) //隐藏当前区域信息; $("#tips").css("display", "none"); } }); })(i)
Done!