QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 提示框/浮动层/弹出层 > jquery网络营销地图弹窗显示联系地址代码

原创商用 jquery网络营销地图弹窗显示联系地址代码

jquery网络营销地图鼠标点击城市弹窗显示详细地址信息,点击相应的城市弹窗显示对应内容。css js 结构清晰,下载即可使用,
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="map-content map-branch">
	<div class="map-module">
		<p class="map-title">就近找到我们</p>
		<div class="map-content-info">
			<div class="branch-map-l">
				<div class="map-content-box">
					<span class="map-dot beijing" data-id="beijing" value="北京">北京</span>
					<span class="map-dot tianjin" data-id="tianjin" value="天津">天津</span>
					<span class="map-dot hebei" data-id="hebei" value="河北">河北</span>
					<span class="map-dot shanxi" data-id="shanxi" value="山西">山西</span>
					<span class="map-dot liaoning" data-id="liaoning" value="辽宁">辽宁</span>
					<span class="map-dot jilin" data-id="jilin" value="吉林">吉林</span>
					<span class="map-dot heilongjiang" data-id="heilongjiang" value="黑龙江">黑龙江</span>
					<span class="map-dot shanghai cur" data-id="shanghai" value="上海">上海</span>
					<span class="map-dot jiangsu" data-id="jiangsu" value="江苏">江苏</span>
					<span class="map-dot zhejiang" data-id="zhejiang" value="浙江">浙江</span>
					<span class="map-dot anhui" data-id="anhui" value="安徽">安徽</span>
					<span class="map-dot fujian" data-id="fujian" value="福建">福建</span>
					<span class="map-dot jiangxi" data-id="jiangxi" value="江西">江西</span>
					<span class="map-dot shandong" data-id="shandong" value="山东">山东</span>
					<span class="map-dot henan" data-id="henan" value="河南">河南</span>
					<span class="map-dot hubei" data-id="hubei" value="湖北">湖北</span>
					<span class="map-dot hunan" data-id="hunan" value="湖南">湖南</span>
					<span class="map-dot guangdong" data-id="guangdong" value="广东">广东</span>
					<span class="map-dot guangxi" data-id="guangxi" value="广西">广西</span>
					<span class="map-dot chongqing" data-id="chongqing" value="重庆">重庆</span>
					<span class="map-dot sichuan" data-id="sichuan" value="四川">四川</span>
					<span class="map-dot guizhou" data-id="guizhou" value="贵州">贵州</span>
					<span class="map-dot yunnan" data-id="yunnan" value="云南">云南</span>
					<span class="map-dot shanxi1" data-id="shanxi1" value="陕西">陕西</span>
				</div>
				<div class="branch-map-data" id="company_liaoning">
					<div class="branch-map-data-title">
						<p>辽宁</p>
					</div>
					<div class="branch-map-data-info">
						<div class="data-branch">
							<a href="#" target="_blank" title=""><p class="data-name">大连分公司</p></a>
							<p>地址: 大连市合众分公司</p>
							<p>总机:0411-90xxxx88</p>
							<p>传真:0411-09xxxx88</p>
							<p>网址: <a href="#" target="_blank">www.a-ui.cn</a></p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title=""><p class="data-name">沈阳分公司</p></a>
							<p>地址: 沈阳市国营大道310号民营路旗舰大厦</p>
							<p>总机:024-78787878</p>
							<p>传真:024-87878787</p>
							<p>网址: <a href="#" target="_blank">www.0591ddg.com</a></p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="辽宁网站建设">
								<p class="data-name">锦州分公司</p>
							</a>
							<p>地址: 锦州市中央大街二段25号C座问鼎大厦6楼锦州分公司</p>
							<p>总机:0416-3864222</p>
							<p>传真:0416-3882060</p>
							<p>
								网址: <a href="#" target="_blank">jinzhou.aui.com </a>
							</p>
						</div>
					</div>
				</div>
				<div class="branch-map-data" id="company_guangdong">
					<div class="branch-map-data-title">
						<p>广东</p>
					</div>
					<div class="branch-map-data-info">
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">广州分公司</p>
							</a>
							<p>地址: 广州市越秀区广州大道中289号南方日报</p>
							<p>总机:18688864252</p>
							<p>传真:020-22387951</p>
							<p>
								网址: <a href="#" target="_blank">guangzhou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">深圳分公司</p>
							</a>
							<p>地址: 深圳市南山区高新技术产业园中</p>
							<p>总机:0755-33508008 </p>
							<p>传真:0755-33508160</p>
							<p>
								网址: <a href="#" target="_blank">shenzhen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">深圳第二分公司</p>
							</a>
							<p>地址: 深圳市宝安13区宝民一路宝安宝通大厦</p>
							<p>总机:075533818028</p>
							<p>传真:0755-33818058</p>
							<p>
								网址: <a href="#" target="_blank">baoan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">东莞分公司</p>
							</a>
							<p>地址: 东莞市莞太大道南城路段15号丝绸大厦</p>
							<p>总机:0769-23364010</p>
							<p>传真:0769-23364003</p>
							<p>
								网址: <a href="#" target="_blank">dongguan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">东莞第二分公司</p>
							</a>
							<p>地址: 东莞市南城区莞太路丝绸大厦3楼</p>
							<p>总机:0769-89396708</p>
							<p>传真:0769-85021520</p>
							<p>
								网址: <a href="#" target="_blank">humen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">佛山分公司</p>
							</a>
							<p>地址: 佛山市禅城区季华五路55号万科</p>
							<p>总机:0757-83657888</p>
							<p>传真:0757-83657798</p>
							<p>
								网址: <a href="#" target="_blank">foshan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">中山分公司</p>
							</a>
							<p>地址: 中山市石岐区安栏路2号中恳大厦16层</p>
							<p>总机:0760-23886601</p>
							<p>传真:0760-23881200</p>
							<p>
								网址: <a href="#" target="_blank">zhongshan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#n" target="_blank" title="广东网站建设">
								<p class="data-name">惠州分公司</p>
							</a>
							<p>地址: 惠州市麦地路69号达利大厦</p>
							<p>总机:0752-2080100</p>
							<p>传真:0752-2080202</p>
							<p>
								网址: <a href="#n" target="_blank">huizhou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">汕头分公司</p>
							</a>
							<p>地址: 汕头市金环路时代广场西侧潮汕星河大厦</p>
							<p>总机:0754-88483737</p>
							<p>传真:0754-88483747</p>
							<p>
								网址: <a href="#" target="_blank">shantou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">龙岗分公司</p>
							</a>
							<p>地址: 深圳市龙岗区龙岗街道龙岗大道号</p>
							<p>总机:0755-33839928</p>
							<p>传真:0755-33839900</p>
							<p>
								网址: <a href="#" target="_blank">longgang.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">顺德分公司</p>
							</a>
							<p>地址: 广东省佛山市顺德区大良街道办事处中区居委会</p>
							<p>总机:0757-22313658</p>
							<p>传真:0757-22313765</p>
							<p>
								网址: <a href="#" target="_blank">shunde.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">江门分公司</p>
							</a>
							<p>地址: 东华一路61号金华商业中心8层825室</p>
							<p>总机:13902586188,0750-3293088</p>
							<p>传真:0750-3293009</p>
							<p>
								网址: <a href="#" target="_blank">jiangmen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="广东网站建设">
								<p class="data-name">珠海分公司</p>
							</a>
							<p>地址: 广东省珠海市香洲区明珠南路2158号华业大厦</p>
							<p>总机:0756-8580080</p>
							<p>传真:0756-8580051</p>
							<p>
								网址: <a href="#" target="_blank">zhuhai.aui.com </a>
							</p>
						</div>
					</div>
				</div>
				<div class="branch-map-data" id="company_shandong">
					<div class="branch-map-data-title">
						<p>山东</p>
					</div>
					<div class="branch-map-data-info">
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">青岛分公司</p>
							</a>
							<p>地址: 青岛市南京路8号府都大厦14层</p>
							<p>总机:0532-85027637</p>
							<p>传真:0532-66986374</p>
							<p>
								网址: <a href="#" target="_blank">qingdao.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">济南分公司</p>
							</a>
							<p>地址: 济南市泺源大街68号玉泉森信大酒店</p>
							<p>总机:0531-55657796</p>
							<p>传真:0531-55657297</p>
							<p>
								网址: <a href="#" target="_blank">jinan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">烟台分公司</p>
							</a>
							<p>地址: 山东省烟台市芝罘区南大街213号华天大厦</p>
							<p>总机:0535-4080614</p>
							<p>传真:0535-6634349</p>
							<p>
								网址: <a href="#" target="_blank">yantai.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">济南第二分公司</p>
							</a>
							<p>地址: 济南市顺河街66号 银座晶都国际1号楼6层</p>
							<p>总机:0531-81771588</p>
							<p>传真:0531-81771515</p>
							<p>
								网址: <a href="#" target="_blank">jinan2.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">威海分公司</p>
							</a>
							<p>地址: 威海青岛中路附106号龙海国际</p>
							<p>总机:0631-5322326</p>
							<p>传真:0631-5272829</p>
							<p>
								网址: <a href="#" target="_blank">weihai.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">淄博分公司</p>
							</a>
							<p>地址: 淄博市张店区柳泉路156号</p>
							<p>总机:0533-2360088</p>
							<p>传真:0533-2360000</p>
							<p>
								网址: <a href="#" target="_blank">zibo.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">潍坊分公司</p>
							</a>
							<p>地址: 潍坊市奎文区鸢飞路与福寿街万达广场B座11楼</p>
							<p>总机:0536-5076688</p>
							<p>传真:0536-5076606</p>
							<p>
								网址: <a href="#" target="_blank">weifang.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山东网站建设">
								<p class="data-name">临沂分公司</p>
							</a>
							<p>地址: 临沂市兰山区金雀山一路开元上城B座1117室</p>
							<p>总机:0539-3217967</p>
							<p>传真:0539-3217933</p>
							<p>
								网址: <a href="#" target="_blank">linyi.aui.com </a>
							</p>
						</div>
					</div>
				</div>
				<div class="branch-map-data" id="company_yunnan">
					<div class="branch-map-data-title">
						<p>云南</p>
					</div>
					<div class="branch-map-data-info">
						<div class="data-branch">
							<a href="#" target="_blank" title="云南网站建设">
								<p class="data-name">昆明分公司</p>
							</a>
							<p>地址: 昆明市青年路389号志远大厦副楼(志远新天地)5楼E座</p>
							<p>总机:0871-66349955</p>
							<p>传真:0871-66098579</p>
							<p>
								网址: <a href="#" target="_blank">kunming.aui.com </a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		if ($(".map-branch")) {
			//默认显示上海
			$(".map-dot.shanghai").addClass("cur");
			$("#company_shanghai").show().css({
				"left": $(".map-dot.shanghai").position().left + 36,
				"top": $(".map-dot.shanghai").position().top - $("#company_shanghai").height() / 2 + 8
			});
			$(".map-dot").on("mouseover", function() {
				$(this).addClass("cur").siblings(".map-dot").removeClass("cur");
			});
			$(".map-dot").on("click", function() {
				$(this).addClass("cur").siblings(".map-dot").removeClass("cur");
				var dataid = $(this).attr("data-id")
					, comp = $("#company_" + dataid)
					, otherComp = $("#company_" + dataid).siblings(".branch-map-data");
				comp.fadeIn("fast").css({
					"left": $(this).position().left + 36,
					"top": $(this).position().top - comp.height() / 2 + 8
				});
				otherComp.hide();
			});
			$(".branch-map-data").on("mouseleave", function() {
				$(this).hide();
				$(".map-dot").removeClass("cur");
			});
		}
	});

</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
中乐彩票 www.3536.biz-糖果派对粉色彩金| www.7749.org-风彩彩票可靠吗| www.623520.com-快三传统彩规则| www.k45.bid-北京快三计划微信群| www.092867.com-福彩三d开奖公告| www.180734.com-快三的奖号怎么推算| www.273933.com-福彩快12玩法介绍| www.909262.com-甘肃体彩网首页| www.327336.com-体育彩票今天开奖吗| www.vm20.com-福彩一等奖多少钱| www.83dj.cc-河南幸运彩争先勇士| www.8308.space-500万彩票技巧| www.32364.com-高盛彩票app| www.tr15.com-香港供彩社区| www.340500.com-买竞彩中大奖新闻| www.484818.cc-福彩彩谜天地| www.524956.com-时时彩apk软件| www.808801.com-体彩大乐透百度贴吧| www.958455.com-聚富大发快三计划| www.fo89.com-uu快三规律-| www.810810.cc-杨光华彩票大王| www.913976.com-福彩三d连线走势| www.987714.com-93768时时中彩| www.ct50.com-优信彩票大发快一| www.xm43.com-彩之家app官网| www.824667.com-68彩票评论-| www.965243.com-tkcc天空彩资料| www.nz90.com-竞彩九场开奖奖金| www.30hv.com-正版福利彩票双色球| www.028004.com-鸿彩网网址-| www.115847.com-足球彩票胜负比分| www.770263.com-金牛彩票网官方网站| www.616621.com-足球体彩竞彩怎么买| www.09009.cc-广东体彩微信公众号| www.95702.com-篮球竞彩神单| www.790508.com-七星彩投注网| www.9yl.com-彩票今天开什么奖| www.024055.com-福彩票开奖查河| www.823740.com-加盟三彩需要多少钱| www.954640.com-国外代购彩票合法吗| www.cp3869.com-河南福彩快乐3开奖| www.54142.cc-体彩标志的含义| www.555082.com-乐彩神-| www.442008.com-福利彩票游戏可靠吗| www.585059.com-江北好彩酒楼| www.p56.cc-快三多久一期| www.mz26.com-彩票破解神器| www.160765.com-258彩票开户| www.271422.com-广东好彩1一彩乐乐| www.96nt.com-彩票的打码量啥意思| www.152279.com-彩之网互动交流区| www.8341.link-东方彩票网平台| www.352887.com-高频彩官方网站平台| www.620673.com-马彩三中三-| www.135592.com-早上买彩票的人多吗| www.248281.com-上海福彩快三app| www.335643.com-红中彩票手机版| www.429822.com-简单好看的水彩画| www.767.cm-内蒙古破解时时彩| www.927636.com-江苏省体育彩中心| www.995405.com-北京彩票中过大奖吗| www.101045.com-开心网玩快三可靠吗| www.191749.com-分分快三平台下载| www.898806.com-最好足球彩票软件| www.590310.com-六爻预测彩票| www.836319.com-福彩3d图谜八| www.973696.com-彩票助手下载| www.wi7.cc-东北辽宁快三走势图| www.yv84.com-云南福彩中心白云路| www.054141.com-分分快三推荐| www.33880.com-怎么考取彩票分析师| www.053624.com-足球彩票店选址心得| www.3666.vip-星期六福彩开什么| www.366933.cc-黑彩平台改分神器| www.596357.com-app中华彩票网| www.791320.com-福彩自助投注机| www.369408.com-彩友时时彩人工计划| www.575377.com-中国福彩3d开机号| www.807071.com-彩票废纸-| www.sh8.cc-江西快三实时走势图| www.221447.com-500彩票辅助器| www.9657.me-万彩8彩票-| www.41384.com-彩虹六号腾讯手游| www.821852.com-彩票任三中二| www.365210.cc-菜鸟彩票真的假的| www.9pz.com-世界杯足彩竞猜论坛| www.73zz.com-好彩客苹果下载| www.1786.net-皇轩彩票网址| www.685501.com-非凡彩票主页| www.799822.com-湖南福彩动物走势图| www.873317.com-福彩群英会20号| www.934480.com-即时开彩新版| www.999299.com-竞彩足球彩票360| www.ap52.com-吉林快三跨度表| www.wr94.com-彩票贵宾会-| www.905166.com-福利彩票店怎样选址| www.985807.com-众彩网千里马预测| www.di75.com-快三稳赚技巧公式| www.g47.net-开奖公告新浪彩票| www.333.tv-3d彩票魔方选号器| www.rs50.com-559彩票公司| www.15ac.com-如何手机购买彩票| www.556818.com-苹果彩票线路| www.408872.com-手机上购买七星彩票| www.44750.com-网上快三倍投计算器| www.110650.com-七星彩奖池金余额| www.655514.com-福运彩票下载安装| www.11177.cc-易彩注册账号| www.9641.loan-体彩排列三老吉杀号| www.551687.com-彩乐网zz88cc| www.639155.com-福彩刮刮乐编号看奖| www.760332.com-西蔵快三开奖| www.887610.com-手机购彩11选5| www.952218.com-加拿大3分彩开奖图| 好彩在线www.hczx3.com| www.ep17.com-彩要开奖查询公告| www.h30.biz-七星彩在哪里领奖| www.836264.com-彩票a-| www.024878.com-幸运二分彩-| www.131379.com-信阳结婚要多少彩礼| www.217909.com-吉林快三新走势图| www.133428.com-好彩1怎样精准命中| www.288229.com-爱彩乐苹果手机下载| www.252643.com-微彩网是正规的吗| www.597565.com-分分彩后三稳赢技巧| www.2313.cc-彩吧图库山东真诀| www.43866.cc-福彩快3停售时间| www.2og.com-乐彩客足球-| www.46689.com-好彩三复式注数计算| www.270328.com-百盈快三走预测| www.8671.xyz-北京福彩网论坛| www.923392.com-87彩店改了-| www.6648.cc-福彩31选7-| www.074322.com-彩富网香港网| www.cp5679.com-快三有买大小单双吗| www.303203.com-彩虹5无人机| www.42954.com-锋彩直播免费下载| www.30ua.com-安徽快3来彩彩票| www.838382.com-江苏快三人为控制吗| www.cai333.com-福彩快三骗局| www.680985.com-七星彩可以赚钱吗| www.768698.com-常州体育彩票| www.88mi.cc-镀铝锌彩涂板| www.950791.com-噢克彩票网-| www.en84.com-重庆快三彩票| www.28at.com-福利彩票注册账号| www.3eg.cc-黑彩比较稳定的平台| www.802419.com-北站彩票站外兑| www.388488.com-女孩总是叫陪她玩彩| www.578.me-天无彩选四开奖结果| www.536561.com-我国彩票有哪几种| www.314975.com-爱彩通软件下载| www.392349.com-派彩牌洗面奶| www.501609.com-福星福彩推荐| www.607585.com-彩票网加盟店| www.728.me-今晚竞彩分析| www.839261.com-立博博彩app| www.916750.com-私彩网址-| www.970018.com-彩票和双色球的区别| www.cai3966.com大发快三走势图今天| www.py85.com-132彩票经典版| www.1hl.com-福彩和体彩哪个挣钱| www.04jo.com-在线即开彩票| www.022072.com-购物送彩票合理么|