jQuery中国地图显示公司位置全国分布代码

来源:https://www.sucaihuo.com/js/4745.html 2019-09-15 11:40浏览(849) 收藏

jQuery中国地图显示公司位置全国分布代码,点击各省份弹窗显示对应介绍信息。
jQuery中国地图显示公司位置全国分布代码
分类:统计图 > 地图 难易:初级
查看演示 下载资源 下载积分: 30 积分

js代码

<script type="text/javascript">
        $(function() {
            if ($(".map-branch")) {
                //默认显示上海
                $(".map-dot.shanghai").addClass("cur");
                $("#company_shanghai").show().css({
                    "left": $(".map-dot.shanghai").position().left + 36,
                    "top": $(".map-dot.shanghai").position().top - $("#company_shanghai").height() / 2 + 8
                });
                $(".map-dot").on("mouseover", function() {
                    $(this).addClass("cur").siblings(".map-dot").removeClass("cur");
                });
                $(".map-dot").on("click", function() {
                    $(this).addClass("cur").siblings(".map-dot").removeClass("cur");
                    var dataid = $(this).attr("data-id")
                        , comp = $("#company_" + dataid)
                        , otherComp = $("#company_" + dataid).siblings(".branch-map-data");
                    comp.fadeIn("fast").css({
                        "left": $(this).position().left + 36,
                        "top": $(this).position().top - comp.height() / 2 + 8
                    });
                    otherComp.hide();
                });
                $(".branch-map-data").on("mouseleave", function() {
                    $(this).hide();
                    $(".map-dot").removeClass("cur");
                });
            }
        });

</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2