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.hzjiajiaow.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.984783.com-鼎盛彩运8骗局| www.518909.com-彩票八喜中奖| www.9154.shop-七乐彩2拖7钱| www.295822.com-廿隶快三-| www.191325.com-一分快三单双怎么看| www.39773.cc-中发彩票下载| www.672512.com-足彩推荐分析app| www.767462.com-青蛙彩网址-| www.853411.com-体彩4十1-| www.913601.com-好彩客平台正规吗| www.971454.com-彩票巴巴app| 彩71www.737884.com| www.120849.com-福彩3d藏机图正版| www.52815.cc-好彩投app靠谱吗| www.255138.com-时时彩概率科学买法| www.319157.com-七星彩下载软件| www.213837.com-彩神vl预测-| www.1092.cn-快三群里面有没有托| www.197522.com-快三今天开奖号| www.0438.xyz-懂球帝买足彩在哪里| www.188158.com-中国体彩香港快3| www.282659.com-彩宝网3d试机号| www.119269.com-360彩票导航图表| www.064708.com-什么彩票平台稳定| www.30lp.com-优秀色彩头像女| www.4283.vip-体彩大乐透五等奖| www.33226.cc-福彩中4个号多少钱| www.001952.com-深圳市福彩中心| www.141577.com-三d字谜总汇新彩网| www.09838.com-合法网络彩票平台| www.35145.com-体彩快三查询| www.910427.com-彩99安卓下载安装| www.675569.com-新浪彩票风暴| www.432808.com-红橘微彩娱乐| www.198929.com-快乐彩票官网| www.160806.com-竟彩258彩票| www.457839.com-周六安徽体彩大乐透| www.745217.com-大赢家彩票138| www.916901.com-永盛彩票手机登录| 500万彩票www.638802.com| www.0df.com-在私彩做代理违法不| www.937464.com-彩64彩票平台| www.773708.com-500彩票大发3| www.892700.com-彩票01官方-| www.983680.com-幸运时时彩有官网吗| www.d29.com-全民足球彩票app| www.833116.com-网络彩票77-| www.936106.com-安装七星彩够力长条| 易彩网www.36166u.com| www.it21.com-江苏体彩e球彩下载| www.d59.top-下彩网彩票-| www.gh28.com-福利彩票快三代理| www.mh49.cc-快三跨度和值速查表| www.979426.com-快三回血贴吧| www.hg07.com-百胜快三预测| www.zv28.com-福彩11选5走势图| www.19wp.com-彩票挂机设置| www.290104.com-美术作品大全彩铅画| www.372856.com-快三开奖时间改变| www.471492.com-广东天彩快三正规吗| www.tm1.cc-上快三爱彩乐| www.339877.com-大乐透山西体彩预测| www.97918.com-福彩即开型彩票中奖| www.87ee.com-云鼎彩票线路| www.307675.com-韩国快三电子派彩涂| www.444939.com-下彩网页版| www.871904.com-彩49彩票安卓版| www.936608.com-溢彩年华-| GO彩www.fo03.com| www.031312.com-黑彩平台代理好吗| www.9467.vip-国外旅游买彩票中奖| www.454507.com-买两元彩票中多少钱| www.5118.in-彩播直播平台网站| www.27471.com-破解app彩票| www.952652.com-福利彩票大乐透| www.560082.com-体彩排列是5走势图| www.638374.com-福彩文化是公益| www.708603.com-深圳市体育彩票兑奖| www.y96.top-福彩61中奖规则| www.i65.mobi-彩票精彩论坛网址| www.39065.com-中彩彩票注册账号| www.578949.com-pk彩吧计划聊天室| www.670492.com-体彩排列五现场开奖| www.xz7.com-怎么看懂彩票| www.550221.com-778彩票官方网站| www.804785.com-lgbt彩虹旗图片| www.902675.com-亚朵网彩票-| www.972893.com-彩票中了什么时候领| www.bj89.com-福彩图迷-| www.a98.win-小班彩虹伞教案| www.526817.com-华富鼎彩票诈骗| www.488799.com-彩票2元网排5| www.75jj.com-从赔率看足彩冷门| www.581162.com-好彩网址是多少| www.659707.com-顺赢彩票是真是假| www.732763.com-南京体彩销售点| www.817589.com-电脑福利彩票时时彩| www.900798.com-爱彩彩票官方网站| www.966809.com-体彩多少天兑奖| www.cp473.com-大发快三彩票怎么玩| www.40gh.com-彩礼的谈判案例分析| www.33187.cc-试机号走势图彩宝网| www.69094.com-微信美女聊天买彩票| www.920435.com-凤彩网正规吗| 天天彩票www.54968f.com| www.33il.com-福利彩票几点关| www.iz98.com-魔鬼福彩走势图| www.408146.com-版免费彩票资料大全| www.42769.com-双彩软件-| www.hn29.com-福彩快5玩法介绍| www.083912.com-快乐彩官方网站| www.160931.com-海口七星彩开心网| www.251789.com-旺彩彩票网站| www.309441.com-快三属于福彩吗| www.9852.shop-古建彩绘行龙图案| www.433048.com-彩球网-| www.17414.com-中国竞彩网唯唯看球| www.hx77.com-快三开对子的概率| www.948320.com-牛彩-| www.983818.com-众彩网专家杀号| www.775560.com-彩富之家-| www.001481.com-体彩点石成金中奖率| www.191275.com-分分快三在线计划| www.2407.top-竞彩店买足彩| www.21835.com-益彩纺织-| www.428418.com-国外竞彩推荐网站| www.576209.com-牛彩釆摘网-| www.658749.com-范伟买彩票中奖号码| www.f84.pw-查询体彩排列三字迷| www.sv33.com-彩票公式-| www.469587.com-海南网络彩票诈骗| www.713727.com-什么彩票软件比较好| www.3769.cc-贵宾室彩票网页版| www.898559.com-福彩3d专家预恻| www.974990.com-体彩大乐透前三加一| www.jl04.com-桂快3彩票怎么玩法| www.67.hk-天下开彩开奖结果| www.93zx.com-易彩堂公司地址| www.936211.com-重庆五分彩开奖结果| www.553068.com-时时彩打流水方法| www.672578.com-福彩3第之家| www.772368.com-篮球博彩算加时吗| www.860865.com-河南体彩中心地址| www.947054.com-福利彩票高频彩输赢| 皇家彩票www.hj0555.com| www.088925.com-彩吧图谜第2版3d| www.174611.com-快三哪个平台最好| www.5963.bid-酷彩彩票app下载| www.677733.cc-银川哪家彩票转让| www.799908.com-快三走势图怎么做| www.uw35.com-大发快三uu快三| www.782188.com-彩票双球3b-| www.857058.com-五分钟快三开奖查询| www.916085.com-体育彩票店转让流程| www.977245.com-濮阳彩礼限制| 爱彩乐www.754918.com| www.gw97.com-爱乐透彩票新版下载| www.zg12.com-七乐彩杀号360| www.23708.com-彩票一般怎么买| www.956355.com-七星彩的开奖号码是| 开心彩票www.361706.com| www.929828.com-快三怎么看和值走势| www.988848.com-彩51彩票平台| www.cf30.com-大发快三在哪注册|