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.anchi01.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.945158.com-分分时时彩破解| www.688275.com-广东省体彩兑奖中心| www.799185.com-神彩v密聊-| www.901110.com-3d彩界小少爷独胆| www.019921.com-彩票时时彩下载| www.098645.com-福彩在线刮刮乐| www.184695.com-快三过五啥意思| www.280011.com-福彩快3投注技巧| www.7140.biz-时时彩怎么可以赚钱| www.22590.com-网上买时时彩违法吗| www.355.date-哪里可以看外国彩票| www.480806.com-看陆和彩开奖的| www.732186.com-cc国际彩球网| www.839919.com-责任彩票答卷| www.939268.com-官方快三投注平台| 七乐彩票www.qilc5.com| www.655070.com-香港皇彩-| www.865676.com-123彩-| www.045544.com-十大私彩平台软件| www.137829.com-尊彩网-| www.244020.com-福彩开奖结果查| www.6556.net-官彩网app-| www.429440.com-打地鼠彩虹伞目标| www.093979.com-福彩蛋蛋正规不| www.189822.com-江苏快三今日推荐| www.019050.com-青蛙过河游戏彩票| 百姓彩票www.zuan333.com| www.te77.com-时时彩组三大全| www.gk57.com-福彩快三高手| www.02if.com-湖北福彩彩票开奖| www.99tw.com-彩票能研究么| www.4433.pw-江苏快三三同号遗漏| www.25836.cc-八卦奇门彩票取数法| www.76413.com-海口彩票网手机版| www.029152.com-神州彩运-| www.101701.com-彩票开奖查询询| www.39237.com-天天爱彩票几天开| www.101815.com-彩185-| www.517891.com-a23彩票-| www.647963.com-斯蒂芬数学家彩票| www.856818.com-福彩十五选五跨度| www.vq52.com-彩专家人工定胆计划| www.70256.com-网上怎么开彩票店| www.zw72.com-彩虹冰淇淋机| www.96uf.com-彩票网站提现| www.8378.pw-雷州七星彩南国论坛| 彩乐乐www.3005w.com| www.005735.com-彩票计划9cb| www.552828.com-北京pk分分彩害人| www.h26.pw-六合彩开奖结果| www.393157.com-福彩3d出啥号| www.259778.com-中彩票软件app| www.33910.com-彩吧图库图谜第二版| www.243299.com-福利彩票3-| www.485959.com-幸运飞艇彩票聊天室| www.25277.cc-苹果彩铅-| www.331478.com-高手网免费港彩资料| www.804178.com-新2彩票平台| www.922260.com-365彩票提现不了| www.325875.com-星彩3d论坛app| www.486036.com-彩8快三-| www.605931.com-购彩之家991| www.721829.com-赚投彩票挂机软件| www.867309.com-2019期七星彩| www.966707.com-宝马彩票安卓下载| www.a89.net-彩博888网-| www.dy24.com-台北快三规律| www.973474.com-彩虹意境图片| www.441694.com-中国体育彩票被限制| www.678263.com-申请一个体育彩票| www.831192.cc-2019胜负彩赛程| www.jn.com-快3彩票开奖查询| www.064.site-天中好运彩-| www.8146.biz-三d众彩网专家预测| www.91ou.com-彩票怎么买扣税最少| www.893043.com-彩经网打不开| www.382146.com-19007期胜负彩| www.697787.com-浙江体育彩票手机版| www.875062.com-熊猫彩-| www.38mr.com-东北彩礼多少| www.769130.com-好彩网能玩吗| www.356467.com-竞彩最佳投注方式| www.819516.com-彩票吵群技巧| www.984698.com-干支纳数法彩票| www.1hp.cc-玩网络彩票赌博输惨| www.050198.com-黑彩的庄家的风险| www.139.com-有关彩虹的名字| www.77293.cc-彩客手机官网| www.33xf.com-七星彩长局数字表| www.360716.com-快三新玩法-| www.565625.com-官方手机彩票哪个好| www.54uy.com-pk彩票主页| www.5050.pro-福彩杀码技巧| www.66478.com-百乐彩赚钱吗| www.145178.com-3d彩票吧百度帖吧| www.288275.com-江苏爱彩乐开奖结果| www.461553.com-新加坡十分彩官网| www.599976.com-买彩票输了如何回本| www.367879.com-彩涂合金铝卷生产| www.169326.com-怎么看懂快三走势图| www.322033.com-阿里彩票平台官网| www.457271.com-恒大博彩-| www.608068.com-注册送彩金白菜网| www.805058.com-彩票了3d怎么选号| www.996752.com-体彩月球独胆专家| www.nf99.com-乐优炫彩app| www.34ho.com-福彩3d图标| www.1930.xyz-天津快乐十分派彩网| www.81813.cc-吉林快三怎么压能赢| www.133088.com-世界杯网上购彩| www.288410.com-北京快3开爱彩乐| www.556291.com-为什么买私彩总是输| www.714813.com-瑞彩祥云不能提现了| www.923288.com-深圳体彩店转让更新| www.527896.com-重庆时时彩当前遗漏| www.717862.com-足彩即时比分旧版| www.826759.com-太阳彩票靠谱吗| www.942838.com-众彩易购app| www.xh.com-手机福彩官方下载| www.716684.com-水彩星空鲸鱼| www.816339.com-河北快三分析大师| www.939249.com-大乐透资讯新浪彩票| www.53yt.com-遵义买彩票-| www.5665.com-彩票十一选五夺金| www.027248.com-英国5分彩官方网站| www.107044.com-有没有黑客黑时时彩| www.187066.com-吉林快三有玩的吗| www.306398.com-加彩票站微信买彩票| www.456174.com-联机盒子彩名| www.603183.com-福利彩奖-| www.682089.com-谁有微信足彩群| www.780522.com-ai足彩预测-| www.356147.com-体彩属于哪个部门管| www.437009.com-七星彩定位号| www.522076.com-公益彩票大乐透| www.580869.com-彩票平台制作多少钱| www.662903.com-中国体肓彩票app| www.730561.com-体彩金7乐专家预测| www.796310.com-彩盈-| www.866461.com-昨日体彩开奖| www.918852.com-如何举报私彩| www.971643.com-福彩端app安全| www.cai09.cc-快三规则-| www.lh84.com-中彩娱乐提现不了| www.p99.wang-快钱彩票是合法的吗| www.35ki.com-彩90-| www.fz47.com-谁有时时彩群| www.678356.cc-快发彩票下载安装| www.219445.com-彩钢围挡多少钱一米| www.050325.com-彩票站黑彩处罚| www.05ep.com-彩29彩票违法吗| www.119466.com-彩票店励志名言| www.223148.com-重庆快三开奖图| www.968408.com-欢乐时时彩开奖结果| www.21336.cc-潜龙神彩-| www.061152.com-丹麦快乐彩官网| www.138887.com-百盈快三秘籍| www.19er.com-彩仙阁软件app| www.1jz.cc-周一晚上福彩| 彩天下www.196303.com| www.oh81.com-快三如何追号追豹子| www.55zr.com-彩票乱乱乐中奖图片| www.3403.cc-双色球字谜总汇福彩| www.06431.com-彩票代投知乎|