当前位置：前端开发者 > 教程 > 正文

前端地图背景切换

2018-11-26 21:17:56 分类：教程阅读(77) 评论(0)

百度地图前端开发

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

标签：前端开发者

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶
回顶部