特效描述:html5svg浙江地图 map省市地区代码。html5基于svg绘制中国浙江地图,点击map地图省市区进入浙江地区城市,如果需要还有全国地图以及其他省市地图。可联系我。
代码结构
1. 引入JS
2. HTML代码
/>
/>
舟山市
宁波市
嘉兴市
湖州市
杭州市
衢州市
丽水市
金华市
绍兴市
台州市
温州市
var classObj=[{name:"zhoushan",zipcode:"330901",color:"#EE8A95"},{name:"ningbo",zipcode:"330201",color:"#F8C67D"},{name:"jiaxing",zipcode:"330401",color:"#EE8B94"},
{name:"huzhou",zipcode:"330501",color:"#FBE6EF"},{name:"hangzhou",zipcode:"330101",color:"#D4ECB2"},{name:"quzhou",zipcode:"330801",color:"#CDB58A"},
{name:"lishui",zipcode:"331101",color:"#D4ECB2"},{name:"jinhua",zipcode:"330701",color:"#F8C67D"},{name:"shaoxing",zipcode:"330601",color:"#F6F67B"},
{name:"taizhou",zipcode:"331001",color:"#FBE6EF"},{name:"wenzhou",zipcode:"330301",color:"#EE8B94"}];
for(var i=0;i
(function(){
var option="."+classObj[i].name;
var color=classObj[i].color;
$(option).each(function(index, element) {
element.οnmοuseοver=function(){
var className="."+this.className.animVal;
$(className).each(function(index,elem){
elem.style.fill="#33CCCC";
$(className).filter("text")[0].style.fill="#f00";
})
}
element.οnmοuseοut=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="#000";
})
}
element.οnclick=function(){
var className=this.className.animVal;
url=className+".html";
window.location=url;
}
});
})(i)
}