教程
0

前端地图背景切换

由前端开发者 · 发布于 2018年11月26日20:45:59 · 更新于 2018年11月26日21:17:56

摘要：百度地图前端开发 web前端开发百度资源前端开发百度地图标注百度事业部前端开发写了一个雏形地图背景切换，代码可优化的，欢迎各位优化分享 html 代码 <!DOCTYPE html> <html> ……

百度地图前端开发

web前端开发百度资源

前端开发百度地图标注

百度事业部前端开发

写了一个雏形地图背景切换，代码可优化的，欢迎各位优化分享
html 代码

<!DOCTYPE html>

<head>

<title>debug</title>

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

<script src=”http://libs.baidu.com/jquery/1.7.2/jquery.min.js”></script>

</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>

前端开发百度网盘

前端开发百度云盘

前端开发共享百度云

» 本文来自：前端开发者 » 《前端地图背景切换》

» 本文链接地址：https://www.rokub.com/6772.html

» 您也可以订阅本站：https://www.rokub.com

Share

Tags: 前端开发者

You may also like...

发表评论取消回复