基于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. MVC几种找不到资源的解决方式

    在MVC中,controller中的Action和View中的.cshtml文件名称有一个对应的关系. 当不对应时,有以下几种情况发生: 一.找不到视图的错误 请求URL:http://localho ...

  2. struct2 拦截所有没有登录的用户，强行转到登录界面AuthorizationInterceptor

    package com.sise.action; import java.util.Map; import com.opensymphony.xwork2.Action; import com.ope ...

  3. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  4. 从sys/power/state分析并实现S3C2416的睡眠和唤醒

    环境: PC: debian-7.6.0 ARM CPU: S3C2416 Linux-Kernel: 3.6.0(FriendlyARM) U-boot: 1.3.4 一.问题来源 依据须要,在S3 ...

  5. alibaba fastjson TypeReference 通过字符串反射返回对象

    TypeReferenceEditNew Page温绍 edited this page Nov 3, 2017 · 8 revisions1. 基础使用在fastjson中提供了一个用于处理泛型反序 ...

  6. Django--middleware 详解

    面对的问题: 当我们的一个网站上线后有可能遇到一些恶意的访问.比如来自对手的web爬虫:我看过一些lowB的对手,它们IP地址都不换一个的,也不 在行为上做伪装. 1.可行方法一: 在每一个view中 ...

  7. 反转链表（不改变指针）JAVA版

    class ListNode { int val; ListNode next; ListNode(int x) { val = x; next = null; } } public class So ...

  8. 5. MIZ7035 PCIe测试 RIFFA【PCIE视频传输】

    1.前言 MIZ7035官方提供了两种pcie的demo,一个就是普通的PIO测试,一个是BMD测试.我只是试验了PIO功能,可以对板卡直接进行IO寄存器读写.而另外一个BMD功能使用了DMA来加速数 ...

  9. android 自己定义视频播放器之2/1

    非常久没更新博客,相信大家年后都比較忙. 今天给大家带来了一款视频播放器,首先确认的得有几点. 1.首先得有个播放视频的view. 2.加点额外功能进去左边上下滑动调节亮度,右边上下滑动调节声量: 3 ...

  10. 03.反射--01【反射机制】【反射的应用场景】【Tomcat服务器】

    https://blog.csdn.net/benjaminzhang666/article/details/9408611 https://blog.csdn.net/benjaminzhang66 ...