zoukankan      html  css  js  c++  java
  • 基于jquery地图特效全国网点查看代码

    基于jquery地图特效全国网点查看代码。这是一款简单实用的jQuery地图特效,主要知识点是jquery和css实现了中图地图,提示层效果。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

     <div class="m_map">
            <div class="mp mp1">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:乌鲁木齐央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito find_mi1">
                    乌鲁木齐</div>
            </div>
            <div class="mp mp2">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:西安市未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    西安</div>
            </div>
            <div class="mp mp3">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:成都未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    成都</div>
            </div>
            <div class="mp mp4">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:重庆未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    重庆</div>
            </div>
            <div class="mp mp5">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:贵阳未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    贵阳</div>
            </div>
            <div class="mp mp6">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:南宁未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    南宁</div>
            </div>
            <div class="mp mp7">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:昆明未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    昆明</div>
            </div>
            <div class="mp mp8">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:西安未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    西安</div>
            </div>
            <div class="mp mp9">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:郑州未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    郑州</div>
            </div>
            <div class="mp mp10">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:太原未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    太原</div>
            </div>
            <div class="mp mp11">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:武汉未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    武汉</div>
            </div>
            <div class="mp mp12">
                <div class="feng">
                    <div class="tree">
                        <div class="sang">
                        </div>
                        <div class="boou">
                            <img src="images/boou.png" alt="" /></div>
                        <div class="du_size">
                            <p>
                                地址:长沙未央区未央宫街道未央路2号老三届首座大厦11208
                            </p>
                            <p>
                                电话:029-68829598</p>
                        </div>
                    </div>
                </div>
                <div class="mito">
                    长沙</div>
            </div>

    via:http://www.w2bc.com/Article/42066

  • 相关阅读:
    transition
    Java自增陷阱
    不同编码格式中,字节和字符的关系
    表单重复提交
    source folder和package的区别
    @test 测试案例不能添加参数
    http协议content-type
    jdbc的缺点和mybatis的优点
    ==和equals的区别
    spring IOC和AOP
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4562520.html
Copyright © 2011-2022 走看看