前端开发者| 百度地图前端开发 |
| web前端开发百度资源 |
| 前端开发百度地图标注 |
| 百度事业部前端开发 |
写了一个雏形地图背景切换，代码可优化的，欢迎各位优化分享
html 代码
<!DOCTYPE html>
<html>
<head>
<title>debug</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<style type=”text/css”>
.map_img_wrap {
width: 1210px;
height: auto;
border: none;
margin: 0 auto;
}
.map_img_wrap .map_pic_w {
background: url(https://www.rokub.com/wp-content/uploads/2018/11/475-980×450.jpg)
no-repeat;
width: 1210px;
height: 550px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.dsn {
display: none;
}
.opc_1 img {
opacity: 1;
filter: alpha(opacity=100);
}
.opc_0 img {
opacity: 0;
filter: alpha(opacity=0);
}
.z_20 {
z-index: 20;
}
.z_28 {
z-index: 28;
}
.map_img_wrap .show img,
.map_img_wrap .map_img img {
width: 1210px;
height: 550px;
top: 0px;
}
.icon,
.icon img {
width: 50px;
height: 50px;
z-index: 30;
border: 0;
}
</style>
<!– contain b –>
<div class=”map_img_wrap”>
<div class=”map_pic_w rel”>
<div class=”map_img z_28 abs”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<!– img b –>
<div class=”England_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”America_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Holland_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Germany_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”France_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Japan_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Korea_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”HongTai_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Europe_show show z_20 abs opc_0″>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<!– icon b –>
<div class=”England abs icon” style=”left:519px; top:126px;”>
<a href=”http://www.baidu.com” target=”_blank”
><img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/></a>
</div>
<div class=”America abs icon” style=”left:183px; top:155px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Holland abs icon” style=”left:571px; top:157px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Germany abs icon” style=”left:624px; top:175px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”France abs icon” style=”left:521px; top:199px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Japan abs icon” style=”left:1021px; top:214px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Korea abs icon” style=”left:961px; top:221px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”HongTai abs icon” style=”left:931px; top:297px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<div class=”Europe abs icon” style=”left:1064px; top:484px;”>
<img
src=”https://www.rokub.com/wp-content/uploads/2018/11/476-320×320.jpg”
/>
</div>
<!– icon e –>
</div>
</div>
<script>
$(function() {
changemove(‘.England’, ‘.England_show’)
changemove(‘.America’, ‘.America_show’)
changemove(‘.Holland’, ‘.Holland_show’)
changemove(‘.Germany’, ‘.Germany_show’)
changemove(‘.France’, ‘.France_show’)
changemove(‘.Japan’, ‘.Japan_show’)
changemove(‘.Korea’, ‘.Korea_show’)
changemove(‘.Swiss’, ‘.Swiss_show’)
changemove(‘.HongTai’, ‘.HongTai_show’)
changemove(‘.Europe’, ‘.Europe_show’)
})
function changemove(pro, proShow) {
$(pro).mouseover(function() {
$(proShow).removeClass(‘opc_0’)
$(proShow).addClass(‘opc_1’)
})
$(pro).mouseout(function() {
$(proShow).addClass(‘opc_0’)
$(proShow).removeClass(‘opc_1’)
})
}
</script>
<!– contain end –>
</body>
</html>
| 前端开发 百度网盘 |
| 前端开发百度云盘 |
| 前端开发共享百度云 |
» 本文来自：前端开发者 » 《前端地图背景切换》
» 本文链接地址：https://www.rokub.com/6772.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册