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.zwbsc.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.789606.com-竞彩平和让平| www.9290.vip-国乐彩平台网址| www.m13.mobi-大发快三刷流水方法| www.514.xyz-中国体育彩票群| www.7676.in-一出好戏彩票app| www.37557.com-彩73取不了钱| www.198909.com-大乐透彩票规则| www.353350.com-京彩挂机群-| www.536879.com-带彩字的唯美网名| www.620322.com-美国彩票网上能买吗| www.699890.com-彩客站app-| www.789083.com-竞彩神规律-| www.875064.com-体彩足彩购买软件| www.988667.com-微彩站app-| www.315275.com-智能彩票摇号器| www.576425.com-大发快三如何投注| www.723220.com-东彩app下载| www.cai0900.com快三网址多少| www.960609.com-云顶彩票登录| www.hj12.cc-江苏快三二期计划| www.2sv.com-网络彩票可以投资吗| www.56161.com-大富彩票网-| www.178916.com-福彩快三官网直营| www.506105.com-澳门顶级博彩| www.765955.com-大发快三最准算法| www.358134.com-微彩怎么充值| www.553439.com-突尼斯人彩票| www.736927.com-上海福利彩票知识| www.873652.com-西安福彩机子转让| www.cai2929.com安徽快三形态走势图| www.832606.com-福彩3d东北彩票网| 网易彩票www.26163z.com| www.21444.com-河北快三精准计划| www.152716.com-500cc彩票网| www.332822.com-怎样查福彩中奖| www.518249.com-安徽体彩开奖号码| www.d21.top-彩票开奖三d| www.25233.cc-彩铅画能保存多少年| www.006313.com-快三技巧门户| www.119337.com-今天i海快三开奖| www.246132.com-足彩专家预测胜负彩| www.416558.com-遵义好彩香烟价格| www.563046.com-大发快三中奖秘籍| www.677627.com-快三和值与跨度表| www.958872.com-绍兴彩票中奖号码| www.ol95.com-体彩能从网上买吗| www.22vz.com-欢乐彩票平台官网| www.2047.vip-彩票k8网-| www.840013.com-福彩分为几种| www.975577.com-长沙体彩中心| www.od79.com-体彩足球竞猜比分| www.3582.win-首存1元送29彩金| www.559052.com-彩票万人牛牛计划| www.911348.com-快三计划有没有助手| www.271.red-压模彩色地坪材料| www.31456.cc-易彩快三骗局| www.9131.org-保定福彩中心地址| www.81965.com-天下彩资料免大全| www.131496.com-河南彩票弃奖| www.305444.com-彩票能多买几期的吗| www.472007.com-香港三色彩公司开奖| www.699021.com-乐和彩票可靠吗| www.444181.com-最棒的彩票软件下载| www.566474.com-搜狗彩票官网首页| www.703661.com-四川福利彩票机选| www.787567.com-竞彩篮球怎么买| www.905751.com-竞彩足球赛果时间| www.987991.com-互彩宝-| www.ea23.com-台北快三预测| www.0990.vip-旧好彩客下载| www.8168.top-九场胜负彩开奖结果| www.53563.cc-彩虹6号好玩吗| www.014510.com-福彩双色球中奖骗局| www.108759.com-发彩票计划算犯罪吗| www.855051.com-湖北快三开奖一定牛| www.041062.com-分分彩稳定长期挂机| www.192739.com-福彩双色球35期| www.407043.com-彩礼超两万-| www.637406.com-福彩基金-| www.758363.com-众彩易购违法吗| www.954870.com-瑞彩祥云如何作弊| www.411256.com-彩神可以提现吗| www.828964.com-微彩能赚钱吗| www.6097.vip-釉上彩绘画技法| www.129750.com-彩票41期-| www.445897.com-短信积分兑换彩票| www.880299.com-河南体彩发行中心| www.zk61.com-038彩票下载| www.77ym.com-境外博彩员工犯法吗| www.3949.cn-一定牛彩票违法么| www.15300.com-嘉兴体育彩票店转让| www.033861.com-凤凰彩世界贴吧| www.284203.com-网彩是什么-| www.396893.com-中赢彩app-| 彩之堂www.55czt.com| www.739715.com-最新互联网彩票新闻| www.916443.com-天下一第彩票开奖| www.477638.com-彩神通app官方| www.836233.com-顺丰彩票旧版| www.639475.com-竞彩彩258-| www.287.live-领航缔彩-| www.7335.cc-湖南彩票快乐十分| www.41757.com-八方彩票平台下载| www.010107.com-分分彩定位胆口诀| www.595891.com-快餐彩票什么| www.778657.com-中彩彩票广东快三| www.909336.com-超级大乐透彩票规律| www.98866.cc-彩票投注时间限制| www.240877.com-快三中奖能得多少钱| www.871535.com-彩乐汇利盈二分快三| www.40af.com-聚丰50701彩票| www.589149.com-广西快三豹子走势图| www.800842.com-精英彩票高手网| www.64xh.com-澳门三分彩计划网站| www.380392.com-七乐彩19005| www.29960.com-奇妙彩票-| www.576666.com-人人中彩票贴吧| www.xp29.com-网易彩网app下载| www.2913.cc-体育彩票门店图片| www.55225.com-时时彩直选做号技巧| www.079064.com-时时彩规律讲解视频| www.907800.com-合肥体彩中心| www.35cn.cc-七星彩一最新早版| www.811753.com-新家坡天天彩资讯网| www.69234.com-众博彩票下载安装| www.359858.com-体育彩票哪里买| www.608229.com-美国彩票即时开奖吗| www.783555.com-福彩一分快3| www.931402.com-天空彩免费资料大全| www.935789.com-刘大军中彩网| www.aq17.com-浙江体彩-| www.s10.net-yy彩票注册-| www.874.net-时时彩五星专业计划| www.e24.cn-湖北省快三推荐号码| www.99hr.com-彩世界网站-| www.7248.xyz-彩虹六号无人机dr| www.81794.com-吉林快三小玩赢钱吗| www.760939.com-彩票源码要去哪里买| 千百万彩票www.qbwc5.com| www.ib03.com-68彩票骗局-| www.k81.org-河北福彩网官网| www.71wc.com-随机买彩票会中奖吗| www.239691.com-七天彩网址-| www.388409.com-买快三的技巧稳赚| www.639181.com-彩票预测有用吗| www.780665.com-下彩网触屏版首页| www.n99.wang-免费分分彩挂机软件| www.178.red-7彩app骗-| www.21753.cc-聚乐彩平台是真的吗| www.77345.cc-手机玩彩票违法吗| www.070979.com-v8彩票骗局-| www.162549.com-快三012路查询表| www.57933.com-常见彩票种类及玩法| www.356289.com-足彩九场胜负彩结果| www.bk20.com-买彩票36元骗局| www.388290.com-36彩票-| www.588734.com-五分快三这么看走势| www.685898.com-买彩票软件有哪些| www.787226.com-新浪篮彩比分| www.890139.com-买nba体彩-| www.961679.com-重庆贵族快三开奖| www.709827.com-吉林快三软件盘| www.840000.com-彩票数字顺口溜大全| www.963109.com-澳洲时时彩计划公式|