找回密码
当前位置：前端开发者 > 教程 > 正文

前端地图背景切换

2018-11-26 21:17:56 分类：教程 阅读(136) 评论(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>
</html>
前端开发 百度网盘
前端开发百度云盘
前端开发共享百度云
» 本文来自：前端开发者 » 《前端地图背景切换》
» 本文链接地址：https://www.rokub.com/6772.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论