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.720120.com-新2彩票网站靠谱吗| www.653861.com-3d福彩大全-| www.482838.com-有没有两位数的彩票| www.417099.com-竟彩篮球开奖结果| www.662252.com-七彩乐开奖-| www.925616.com-彩6采票下载| www.72td.com-的的跟单体彩软件| www.018685.com-超级彩票助手安卓版| www.202.cn-广州昊彩印刷厂| www.010345.com-华聚彩票-| www.342489.com-福彩大小玩法介绍| www.503180.com-彩虹播下载-| www.854625.com-大众六台彩开奘结果| www.255.gg-福彩休市和开市| www.020977.com-今福彩3d开奖| www.451959.com-太原彩票生意好做吗| www.592130.com-荣耀彩票网-| www.003858.com-广东福彩22选1| www.5672.pw-打彩什么意思| www.514.club-福彩积分卡网站| www.7815.biz-竞彩心得不能买让球| www.50766.com-湖北体彩快开奖结果| www.157667.com-竞彩足彩必胜公式| www.240638.com-彩票计划软件下载| www.255270.com-皇马彩票注册送20| www.97195.com-焦作结婚彩礼多少| www.958832.com-彩票节后什么时开售| www.397196.com-v3彩票app-| www.803606.com-6762彩票网下载| www.915111.com-彩96彩票领导者| 天下彩www.634679.com| www.245868.com-彩票团队带赚导师群| www.080691.com-吉林省体彩11远5| www.180118.com-福彩幸运快三| www.272615.com-pc是福彩的一种吗| www.ai71.cc-南国彩票七星彩论坛| www.9124.net-专业彩吧助手彩票| www.85660.com-搜索彩友网网址| www.690145.com-皇帝彩票网站| www.122206.com-福利彩票专家预测| www.71038.com-新手买什么彩票好| www.1601.org-赌博金沙送38彩金| www.353537.com-药京彩下载-| www.111698.com-快三概率公式| www.006729.com-彩吧3d图谜第一| www.859688.com-厦门福彩快三走势图| www.958936.com-彩117彩票-| www.6cv.com-开体彩店怎么打票| www.87rh.com-淘宝上买彩票合法吗| www.004442.com-三彩丽雪官方旗舰店| www.06338.com-亚搏彩票-| www.197657.com-七星彩兑奖结果| www.09028.com-广东福彩软件下载| www.657312.com-牛彩网首页手机版| www.748600.com-旺彩平台-| www.828080.com-龙之彩平台-| www.750808.com-彩票天天中彩| www.865949.com-分分彩玩法介绍| www.950547.com-乐彩客彩票app| 彩客博www.www.ckb000.com| www.tp84.com-安徽快三怎么投注赚| www.0717.date-永旺彩票平台| www.492877.com-南京彩涂板| www.128717.com-飞来福彩吧-| www.61786.cc-特区彩票七星彩| www.654379.com-南昌彩民中奖| www.781158.com-皇冠彩票投注平台| www.870066.cc-彩票360免费下载| www.gm81.com-濮阳市治理高价彩礼| www.9293.biz-哪个彩票容易中奖| www.053018.com-彩票店倒闭了| www.751026.com-玩彩票上瘾了怎么办| www.835590.com-500彩手机版| www.901806.com-福利彩票游戏机论坛| www.961797.com-加qq买彩票赚钱| 福利彩票www.78700f.com| www.530019.com-3d家彩-| www.684674.com-福彩3d多帮预测| www.800512.com-体彩排列五大星彩票| www.888976.com-帮人投注时时彩骗局| 爱彩www.6888ac.com| www.189001.com-安徽快三预测软件| www.696.red-足球竞彩胜平360| www.6897.loan-好彩头陈忠实的简介| www.057051.com-彩票网站漏洞| www.134228.com-无嘴好彩香烟哪里买| www.639472.com-武汉体育彩票店转让| www.706270.com-发彩网邀请码| www.777329.com-重庆福彩手机购彩| www.873664.com-三的彩票还有试机号| www.958494.com-发彩网怎么注销| 名门彩www.33997t.com| www.531.mobi-七乐彩有几个奖级| www.008166.com-我的彩票开奖规则| www.770937.com-七彩阳光广播操教案| www.j58.top-七乐彩预测杀号汇总| www.489321.com-彩工网公众号| www.557410.com-彩票3d字谜图谜| www.613224.com-免费的彩票程序开发| www.691992.com-正规的彩票-| www.759521.com-南阳彩信-| www.819148.com-帮别人玩彩票赚工资| www.879313.com-刮刮彩中奖图片| www.937377.com-彩福大厦-| www.982190.com-福彩新彩网首页| www.cp5112.com-江苏快三新规则| www.48220.com-彩站之家-| www.0401.xyz-重庆时时彩机选一注| www.40573.com-彩票程序出售| www.97856.com-彩牛网天空彩| www.292234.com-大发系统的彩票平台| www.468336.com-爱彩票冷码-| www.613033.com-澳门十二福利彩下载| www.306978.com-韩国彩票店-| www.03111.cc-内蒙中福快三| www.748161.com-中彩票邀请码| www.811035.com-幸运彩票旗下| www.890524.com-坤彩谢秉坤之子| www.958109.com-鸿运五分彩开奖软件| 500彩票www.52072r.com| www.od67.com-搜索福利彩票开奖| www.56ij.com-139时时彩开奖| www.1906.vip-贵阳多彩贵州城| www.02199.com-炫乐彩-| www.2287.in-时彩宝典pk10| www.9611.top-中奖彩票票面怎么看| www.596357.com-app中华彩票网| www.700096.cc-彩神赛车计划手机版| www.805517.com-时时彩实体店哪里有| www.897404.com-体彩竞彩怎么玩| www.986470.com-7星彩历史开奖结果| www.ga89.com-浙江快乐彩走势图| www.089666.cc-七乐彩3拖7多少钱| www.912651.com-浙江快乐12牛彩| www.078821.com-彩16app官网| www.374666.com-中国体彩湖南赛车| www.318711.com-pc308彩票-| www.626177.com-浙江福彩体彩| www.828232.com-吉彩宝官方下载苹果| www.960964.com-彩票走势图表全国| www.ve17.com-河南福彩票-| www.932757.com-彩73彩票手机版| www.056364.com-七星彩中了两个号码| www.160615.com-中国竞彩胜平负| www.319132.com-合法彩票网站| www.416564.com-快三推算技巧| www.562381.com-彩票理财投资合伙人| www.351366.com-网冠彩是真的| www.419483.com-印象彩-| www.427618.com-噢客彩票十一选五| www.852393.com-时时彩中奖预测| www.k98.cc-彩中彩一担拥有| www.437448.com-陕西省福彩中心图片| www.528867.com-福彩店门店效果图| www.613004.com-彩票双色球日期| www.665016.com-保定彩票兑奖中心| www.020138.com-体育彩票七星彩下载| www.038.in-七星彩番外免费阅读| www.zm85.com-亿博团队快三| www.757250.com-彩家园平台官方网站| www.9086.pro-赢彩王下载-| www.56208.com-香港′彩富网| www.811830.com-福彩主任王素英图片| www.06rt.com-小雏菊彩铅画|