基于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. 安装cacti

    操作介绍如下: http://foreveryan.blog.51cto.com/3508502/775558 安装如下: 英文地址:http://www.cyberciti.biz/faq/fedo ...

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

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

  3. python类内init外声明的属性与init内声明的对象属性的访问和操作区别

    python类内init外声明的属性与init内声明的对象属性的访问和操作区别(面试题) 1.在ipython中输入以下代码,其输出会是什么? In [1]: class ClassOut: ...: ...

  4. 一些http或https请求的参数，什么情况下需要urlencode编码

    http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割.如"?name1=value1&na ...

  5. python标准库介绍——32 Queue 模块详解

    Queue 模块 ``Queue`` 模块提供了一个线程安全的队列 (queue) 实现, 如 [Example 3-2 #eg-3-2] 所示. 你可以通过它在多个线程里安全访问同个对象. ==== ...

  6. U811.1接口EAI系列之一-通用访问EAI方法--统一调用EAI公共方法--VB语言

    1.现在做的项目是关于业务系统与U811.1的接口项目. 2.那么就需要调整通过EAI调用生成U8业务单据. 3.下面就一个通用的向U8-EAI传递XML的通用方法 4.肯定有人会问怎么还用VB调用呢 ...

  7. MySQL 示例数据库 employees 详解

    [引子] IT这一行在我看来是比较要求动手能力的,但是人非生而知之:人们身上的技能除了一些本能之外,大多都是通过学习而得到的. 前一段时间一直在整理素材,写一个关于explain 的系列文章:在一开始 ...

  8. nginx静态资源缓存与压缩

    一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...

  9. 修改 Semantic UI 中对 Google 字体的引用

    在第一次尝试 Semantic UI 后,发现其 css 中第一行,就引用了 fonts.googleapis.com 中的字体. 不知道为什么要这么做,也许在国外,google 的服务已经是一种互联 ...

  10. Java 泛型(Generics) 综述

    一. 引子 一般的类和方法.仅仅能使用详细类型:要么是基本类型.要么是自己定义类型.假设要编写能够应用于多种类型的代码,这样的刻板的限制对代码的束缚就会非常大. 多态算是一种泛化机制,但对代码的约束还 ...