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.xhkyy.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.uu87.com-广西体彩中奖彩票| www.9448.tv-彩钢岩棉夹芯板设备| www.226675.com-破解彩票-| www.977062.com-河南彩礼立法| www.076789.com-六福彩票-| www.033570.com-足彩外围是什么意思| www.072323.com-cp彩票骰子-| www.159138.com-北京快三下载手机版| www.232752.com-北京快乐彩8开奖| www.306438.com-688彩票可靠嘛| www.406386.com-丹东彩票网丹东彩吧| www.wm14.com-幸运快三单双走势图| www.278161.com-香港贵宾中彩网资料| www.372117.com-2044彩票开奖| www.484661.com-青娃彩票现场直播| www.024814.cc-福快三彩票走势图| www.017892.com-刚力彩芽作品番号| www.127864.com-彩虹哥lol-| www.243638.com-手机买彩票怎么下载| www.375447.com-海南福利彩票开奖| www.604140.com-新福彩3d玩法| www.686116.com-赛马结果及派彩| www.772905.com-时时彩厘毫模式| www.874533.com-多宝彩票app| www.984046.com-关注老猫看彩平台| www.gt91.com-梦想彩票登录| www.20ox.com-七星彩16-| www.919991.com-彩票计划软件苹果版| 福彩www.86267q.com| www.315285.com-腾讯分分彩胆码选号| www.331708.com-快彩快3助手下载| www.761204.com-彩礼钱法律规定| www.859728.com-七乐彩单式开奖结果| www.933735.com-彩票指南电子报| www.a18.me-新浪爱彩可靠吗| www.961255.com-彩票坑了多少人| www.652666.com-平台种彩如何破| www.759883.com-时时彩预测宝典| www.918205.com-2345彩票下载| 财神网www.29277v.com| www.013610.com-七星彩这期规律图| www.152622.com-七星彩哪里买| www.313780.com-足彩佬牛最新解盘| www.691150.com-足彩在哪找-| www.781103.com-彩虹哥cf买号官网| www.874503.com-福彩3d老谢说彩| www.995565.com-北单竞彩比赛结果| www.332667.com-五分三块彩票| www.439100.com-悠悠小站彩票ios| www.572852.com-竟彩必发-| www.889732.com-彩票最好的投注方法| 大赢家彩票网www.83033h.com| www.053291.com-胜负彩推荐-| www.5427.top-彩38领导者导航| www.725972.com-手机投注彩票软件| www.831523.com-2019竞彩销量| www.899683.com-彩81官网-| www.975296.com-百度福彩双色球预测| www.al0.com-彩票频道-| www.160351.com-258彩票网注册| www.332468.com-黑彩提现成功过吗| www.976524.com-2018年太原彩礼| www.15yf.com-常州体育彩票转让| www.98in.cc-字体装扮和炫彩字| www.226641.com-旺彩网-| www.89uw.com-体彩竟彩网500| www.4469.vip-吉祥彩手机版| www.672522.com-排列三手机彩宝网| www.859028.com-彩专家网站去哪了| www.hb87.com-玩快三输了一万多| www.27nc.com-68彩票网址-| www.73273.cc-彩票赚钱项目| www.934123.com-快乐彩500彩票网| 天天彩票www.943893.com| www.qf54.com-彩票55app苹果| www.38983.cc-中彩啦怎样下载| www.34694.com-人工智能体彩| www.281058.com-江西时时彩开彩结果| www.435357.com-福利彩票12月14| www.428556.com-青蛙过河福彩| www.789499.com-竞彩上下盘-| www.866102.com-艾彩论坛-| www.929811.com-七乐彩5拖5多少钱| www.996300.com-北单投注彩票| www.ej69.com-杭州快乐彩中奖方法| www.d65.top-重庆时时彩预测资讯| www.429699.com-创意水彩画动物图片| www.937488.com-微彩是骗局揭秘| www.cai744.com-江苏快三计划精准版| www.vu51.com-免费彩票k线软件| www.10gh.com-租彩票平台可信吗| www.127998.com-彩虹mv-| www.3251.biz-重庆官方有分分彩吗| www.13777.cc-足彩19053推荐| www.15zc.com-幸运彩票应用软件| www.30072.cc-体彩现场摇奖| www.gt9.com-快三选号神器| www.0380.xyz-酷彩吧正规不| www.7428.org-开体彩店咨询电话| www.222434.com-兼职彩票赚钱| www.588022.com-购彩v是不是骗人的| www.680078.com-二元彩票网杀号专家| www.775447.com-盈彩网网官网| www.881390.com-酷彩娱乐官网app| www.967341.com-正规彩票微信合买群| www.cp4988.com-快三北京和值走势图| www.4847.cn-彩票导报彩票与生活| www.6704.shop-手机在线买彩票提现| www.41982.com-d9彩票cc-| www.972347.com-福彩体彩-| www.cr82.cc-网上买快三中奖高| www.510221.com-中国福彩正规平台| www.588671.com-七星彩精准头尾王| www.663506.com-分分彩定位胆算法| www.749257.com-彩神3应用-| www.386055.cc-去彩票门店怎么足彩| www.469903.com-彩票七天乐黑庄| www.537748.com-食彩之国-| www.591135.com-七星彩012路| www.653517.com-辉煌彩票指导| www.708228.com-状元彩票网安全吗| www.cp723.com-今日快三开奖快3| www.2zm.com-小平台彩票违法吗| www.413831.com-福彩中的高频彩| www.147813.com-购彩堂是什么| www.61179.cc-唯彩会大师双色球| www.58271.cc-天地彩app下载| www.38189.cc-博创彩票违法吗| www.70658.com-彩票中奖全图查询| www.037716.com-双色球福利彩票软件| www.158353.com-黑龙江体彩领奖地点| www.275869.com-d9彩票下载-| www.086855.com-wfcp五福彩票| www.g53.club-星彩网论坛-| www.899805.com-彩83打不开了| www.o25.org-彩票开奖查询公告彩| www.73vo.com-乐彩网福彩3d网| www.1598.in-腾讯分分彩过号器| www.585029.com-下载易网彩票网开奖| www.129.win-网购足彩恢复时间| www.669574.com-财神腾讯十分彩| www.789867.com-西宁彩票在哪里兑奖| www.884424.com-五行数字和彩票| www.963265.com-彩钢板多少钱一平| www.ri77.com-福彩3d下注-| www.78yj.com-中国福彩3d彩涂| www.15425.com-嘉兴体彩网-| www.41ji.com-vr3分彩技巧| www.657948.com-彩球装饰-| www.cp8268.com-上海福利彩票快3| www.289181.com-彩票平台快三| www.601159.com-彩票能提前买几期| www.yr18.com-体彩排列三玩法介绍| www.513368.com-湖南省体彩招聘| www.609974.com-t星彩-| www.076789.com-六福彩票-| www.062797.com-竞彩足彩推荐平台| www.378955.com-好彩网app网赚| www.265192.com-广西快三顺序| www.4002.cm-竞彩输钱了千万| www.86599.cc-聚丰彩票下载手机版| www.14iy.com-福彩三d杀码| www.611013.com-福利彩票的利润| www.238477.com-用微信买彩票|