700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html代码实现全国地图分布 html5 svg浙江地图map省市地区代码

html代码实现全国地图分布 html5 svg浙江地图map省市地区代码

时间:2021-06-16 01:24:53

相关推荐

html代码实现全国地图分布 html5 svg浙江地图map省市地区代码

特效描述: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)

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。