基于jquery地图特效全国网点查看代码

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

时间: 2024-07-30 10:19:28

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

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

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

基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> <br /> <br /> <br /> <br /> <center> 在这里输入汉字<br /> <textarea id="content"> </textarea><br /&g

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

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

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

基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lineSearch"> <ul> <li class="thRelative" id="hhDrop00"> <div class="boxSearch"> <span class="k

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

基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="display: none" id="browser_ie"> <div class="brower_info"> <div class="notice_info"> <p> 你的

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

分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yListr"> <form> <ul> <li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <e

基于jQuery功能强大的图片查看器插件

viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控制,功能十分强大. 在线预览   源码下载 安装 可以通过nmp或bower来安装该图片查看器插件. npm install imageviewer bower install imageviewer 使用方法 使用该幻灯片插件需要引入jQuery,viewer.css和viewer.js文件. <

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

提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout(messagebox_timer); $("#msgprint").remove(); var m_body = $(this); delay = (typeof delay ==

基于jQuery仿淘宝产品图片放大镜代码

今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href=&q