基于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. iOS 相册相机应用2

    在iOS中要拍照和录制视频最简单的方式就是调用UIImagePickerController,UIImagePickerController继承与UINavigationController,需要使用 ...

  2. SQL Performance Analyzer

    SQL Performance Analyzer 系统发生变更,比如升级数据库.增加索引,都会可能导致sql的执行计划发生改变,从而影响sql的性能. 如果能预知系统变更会对sql的性能的影响,就可以 ...

  3. python IDE 集合

    python ruby等语言由于其小众和动态特性,缺少优良的IDE,本篇将介绍主要的python IDE. 1.python安装后自带有IDLE,简单方便,应该算是最简单的编辑环境了,但是过于简单,不 ...

  4. CSS的Class以及ID选择器

    9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素, ...

  5. Ubuntu 13.10 安装软件失败后出现的问题——已安装 post-installation 脚本 返回了错误号 1

    安装Oracle-java7-installer失败后,再次重新安装后出现错误-- dpkg: error processing oracle-java7-installer (--configure ...

  6. Java – How to convert Array to Stream

    Java – How to convert Array to Stream 1. Object Arrayspackage com.mkyong.java8; import java.util.Arr ...

  7. python标准库介绍——33 thread 模块详解

    ?==thread 模块== (可选) ``thread`` 模块提为线程提供了一个低级 (low_level) 的接口, 如 [Example 3-6 #eg-3-6] 所示. 只有你在编译解释器时 ...

  8. Logstash+ElasticSearch+Kibana处理nginx访问日志（转）

    ELK似乎是当前最为流行的日志收集-存储-分析的全套解决方案. 去年年初, 公司里已经在用, 当时自己还山寨了一个统计系统(postgresql-echarts, 日志无结构化, json形式存储到p ...

  9. Vue 动态组件、动画、插件

    1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...

  10. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...