基于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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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

基于jquery地图特效全国网点查看代码的更多相关文章

  1. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  3. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. 基于jquery判断浏览器版本过低代码

    基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div sty ...

  5. 基于jQuery实现汉字转换成拼音代码

    基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> ...

  6. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  7. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  8. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

  9. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

随机推荐

  1. SQL Server 表分区之水平表分区

    什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...

  2. jstree中文github文档

    jstree Bala...bala...这段就不翻译了. jstree就是个基于JQUERY的树形控件. 1 2 jsTree is jquery plugin, that provides int ...

  3. 整合Solr到Tomcat服务器,并配置IK分词

    好久没有接触新东西了,最新开始熟悉solr,实例展示单机环境solr整合. 整合方案一 1.下载Tomcat与solr并解压 Tomcat解压后磁盘路径为D:\program files\Tomcat ...

  4. 安卓获取ListView、GridView等滚动的距离（高度）

    public int getScrollY() { View c = mListView.getChildAt(0); if (c == null) { return 0; } int firstVi ...

  5. 【转】Currying 的局限性

    Currying 的局限性 很多基于 lambda calculus 的程序语言,比如 ML 和 Haskell,都习惯用一种叫做 currying 的手法来表示函数.比如,如果你在 Haskell ...

  6. ASP.NET项目在IIS上使用虚拟目录

    在IIS中,应用程序与虚拟目录特别容易混淆,但两者又是完全不同的概念. 应用程序是一个逻辑边界,这个边界可以分隔网站及其组成部分.虚拟目录则是一个真实的指针,这个指针指向了一个本地或远程的物理路径.虚 ...

  7. Jmeter录制HTTPS

    Jmeter有录制功能,录制HTTPs需要增加一个证书配置,录制步骤如下: 1.打开jmeter,添加线程组.线程组右键,逻辑控制器>录制控制器 工作台 右键 非测试元件 >HTTP代理服 ...

  8. Hadoop JobTracker和NameNode运行时参数查看

      1)JobTracker运行时参数: hadoop@ubuntu:/home/zhangchao3$ ps -ef | grep job hadoop 29563 1 0 11:34 pts/12 ...

  9. jstypeof方法判断undefined类型

    有关js判断undefined类型,使用typeof方法,typeof 返回的是字符串,其中就有一个是undefined. js判断undefined类型if (reValue== undefined ...

  10. Atitit 图像处理类库 halcon11  安装与环境搭建attilax总结

    Atitit 图像处理类库 halcon11  安装与环境搭建attilax总结 正常安装软件,安装前请先退出其它一切正在运行的程序. 先安装halcon-10.0-windows.exe.安装完成后 ...