写了一个雏形地图背景切换, 代码可优化的, 欢迎各位优化分享
html 代码
- <!DOCTYPE HTML>
- <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(http://cdn.attach.qdfuns.com/notes/pics/201708/29/165950jsbvv6lu6khl6hbv.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="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165208fm43jyjoj2ayiobz.png">
- </div>
- <!-- img b -->
- <div class="England_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165950jsbvv6lu6khl6hbv.jpg">
- </div>
- <div class="America_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165949ztxdf5cfx8affyve.jpg">
- </div>
- <div class="Holland_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165943oibibvt3xy7h2kbt.jpg">
- </div>
- <div class="Germany_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165944sqjnnvuowy2lukdd.jpg">
- </div>
- <div class="France_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165950c8czn5y1c69o1phz.jpg">
- </div>
- <div class="Japan_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165950zyi0fimuf48g9yyp.jpg">
- </div>
- <div class="Korea_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165944eyncnfcqf7lmluyc.jpg">
- </div>
- <div class="HongTai_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165944tktsy4kt4sm99m40.jpg">
- </div>
- <div class="Europe_show show z_20 abs opc_0">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165943oibibvt3xy7h2kbt.jpg">
- </div>
- <!-- icon b -->
- <div class="England abs icon" style="left:519px; top:126px;">
- <a href="http://www.baidu.com" target="_blank">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165946xawa00m6kmqceae4.png">
- </a>
- </div>
- <div class="America abs icon" style="left:183px; top:155px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165945vnx8yynvqfonnzvm.png">
- </div>
- <div class="Holland abs icon" style="left:571px; top:157px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165944h4oeou411zo1hn8a.png">
- </div>
- <div class="Germany abs icon" style="left:624px; top:175px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165939hbhuj2msb46edqm0.png">
- </div>
- <div class="France abs icon" style="left:521px; top:199px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165940q4151b1t1130suzx.png">
- </div>
- <div class="Japan abs icon" style="left:1021px; top:214px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165946gu7727hjl1mbfguh.png">
- </div>
- <div class="Korea abs icon" style="left:961px; top:221px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165943yzexew47exese5zg.png">
- </div>
- <div class="HongTai abs icon" style="left:931px; top:297px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165941ecnzoloucoerl99t.png">
- </div>
- <div class="Europe abs icon" style="left:1064px; top:484px;">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201708/29/165939j37z5e5mzc5bmm7o.png">
- </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>
来源: http://www.qdfuns.com/article/15282/ba48b9d9200a5eaa0810f9eaf11744f3.html