基于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. FluentValidation：C#后端输入验证框架的官方文档解读

    参照 FluentValidation 的官方文档写的例子,方便日后查看和使用. 原文:https://github.com/JeremySkinner/FluentValidation/wiki H ...

  2. mongodb常用命令小结

    一.基于条件的查询 db.getCollection('monitor_log') .find({"requestUrl" : /app\/v1\/findcards\/cn/, ...

  3. Innodb后台线程

    1.maste thread 负责将缓冲池中的数据异步刷新到磁盘,保证数据的一致性. 2.IO Thread负责IO请求的回调处理.1.0版本之前有4个IO Thread,负责write.read.i ...

  4. GC那些事儿--Android内存优化第一弹

    引言 接App优化之内存优化(序), 作为App优化系列中内存优化的一个小部分. 由于内存相关知识比较生涩, 内存优化中使用到的相关工具, 也有很多专有名词. 对Java内存管理, GC, Andro ...

  5. 真正理解 git fetch, git pull 以及 FETCH_HEAD

    真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须要附加讲清楚git remote,git merge .远程repo, branch . commi ...

  6. nginx+php-fpm性能参数优化原则

    1.worker_processes 越大越好(一定数量后性能增加不明显)   2.worker_cpu_affinity 所有cpu平分worker_processes 要比每个worker_pro ...

  7. Nginx启动/重启脚本详解

    Nginx手动启动 停止操作 停止操作是通过向nginx进程发送信号(什么是信号请参阅linux文 章)来进行的步骤1:查询nginx主进程号ps -ef | grep nginx在进程列表里 面找m ...

  8. android surfaceView 的简单使用 画图，拖动效果

    前面说到了画图,其实更好的就是使用 surfaceView了. surfaceView 继承于 View,View里面嵌套了一个专门用于画图的 surface, 对于一个View的onDraw()方法 ...

  9. Web Service 或 WCF调用时读取 XML 数据时，超出最大字符串内容长度配额(8192)解决方法

    1.调用服务时服务 当我们使用 Web Service 或 WCF 服务时,常把读取的数据转化为string类型(xml格式),当数据量达到一 定数量时,会出现以下异常: 错误:格式化程序尝试对消息反 ...

  10. 跨系统-跨数据库访问表或创建映射视图-PB访问数据库的特殊处理

    一. 在项目中可能会遇到在一个项目中会出现多个数据库的操作. 二. 也可能会多个系统多个数据库之间进行交互操作显示. 三. 经常需要两个数据库关联查询或需要翻译显示内容时会很麻烦. 四. 今天就有个简 ...