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.ccxxsjj.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.9952.top-彩票开奖结…果| www.189748.com-江苏福彩开奖公告| www.755535.com-天天好彩彩票| www.863353.com-19029体彩-| www.920372.com-江疏快三下载| www.274631.com-快三二不同号技巧| www.398019.com-七星彩直播网易网| www.061566.com-彩客彩票靠谱吗| www.3545.vip-福彩项目-| www.36604.com-下载澳彩体育彩票| www.253285.com-好彩妹和谁在一起了| www.384468.com-qq拉人玩彩票的| www.583884.com-彩票88官方网站| www.1008.live-星期一开什么彩| www.087234.com-福彩网app靠谱吗| www.850328.com-1分快三开奖历史| www.922660.com-南阳彩铃制作| www.979859.com-体彩终端机说明书| www.mz8.com-自动追号彩票平台| www.710111.cc-女孩喜欢买彩| www.787939.com-信彩彩票不给提款| www.861682.com-彩票历史开奖对比| www.925005.com-中彩票后真实经历| www.979586.com-大发一分彩计划| www.cp8551.com-新吉林快三开奖结果| www.yj58.com-七乐彩3个号有奖| www.8250.top-菲律宾网络彩票事件| www.37572.cc-重庆福彩抽车查询| www.522470.com-乐我时时彩计划网| www.652908.com-胜负彩任九开奖查询| www.31qv.com-彩虹合唱团歌曲视频| www.1127.pw-竞彩联盟-| www.lr23.com-旺彩双色球官方网站| www.698014.com-大发时时彩开奖网站| www.816215.com-统一彩票-| www.9343.cc-彩票用手换球事件| www.036634.com-大奖彩票下载app| www.kn67.com-河北彩票十一选五| www.89167.com-网易福彩3d走势图| www.062240.com-台湾大福彩开奖号码| www.707384.com-新浪足彩竞彩单场| www.826638.com-买彩票不中的原因| www.943115.com-快三带人骗局谁知道| www.5916.vip-用户登录中彩在线| www.629953.com-福彩3d解迷网| www.179517.com-中国福利彩票官网| www.629991.com-福彩三个数字| www.98rv.com-盛彩软件-| www.5242.vip-深圳快乐彩单式走势| www.198757.com-大发快三如何看和值| www.4602.top-彩票要不要守号| www.597686.com-彩薇花化妆品好不好| www.271397.com-好彩蓝莓柠檬双爆| www.395474.com-星期六开啥彩票| www.5423.vip-彩钢瓦水槽安装图片| www.qk38.com-福利彩票三不同开奖| www.b24.site-贵州省快三-| www.j07.com-全国快三走势图| www.75yt.com-台湾福星彩图库记录| www.3006.pw-六禾彩开奖现场报码| www.707558.com-今日体彩足球竞彩| www.821946.com-买彩票怎样中五百万| www.248503.com-体育彩票图谜| www.993766.cc-蓝彩开奖-| www.qt38.com-中国福利彩票改革| www.258889.com-中国竞彩投注比例| www.984811.com-长城彩票官网| www.ag3.cc-体彩跨度走势图| www.nt02.com-大连福彩中心| www.ry15.com-一分快三开奖网站| www.150418.com-分分快三计算软件| www.131670.com-太原彩礼一般给多少| www.138035.com-可以网上买彩票嘛| www.556935.com-永利彩票平台可靠吗| www.087317.com-福彩快3安徽| www.568096.com-长春七彩城影城影讯| www.793538.com-彩票平台报警经历| www.zj01.com-鑫彩晨led显示屏| www.267515.com-吉林省快三遗漏查| www.531236.com-技术型彩民中奖技巧| www.607905.com-四川体彩在哪里兑奖| www.699150.com-网络卖彩票会坐牢吗| www.774493.com-彩票号码有规律吗| www.849944.com-騰訊分分彩網站| www.916957.com-信阳合买彩票| www.970493.com-福彩排7-| www.eh83.com-福彩3d好彩网论坛| www.081979.com-七星彩三字现方法| www.150558.com-彩票程序的编程思路| www.2sz.cc-11选5黑彩平台| www.0081.com-彩字网名大全| www.196185.com-爱彩乐5分快3规律| www.115915.com-足′彩比分直播| www.758708.com-微彩站是正规的吗| www.pb16.com-河北快三买号技巧| www.210935.com-福彩三d双彩论坛| www.398337.com-体彩大乐透推见号码| www.701516.com-c59彩票网-| www.389422.com-福利彩票设备押金| www.315725.com-彩虹网络电视直播| www.393514.com-简单彩铅画多肉植物| www.112773.com-快三彩票中奖助手| www.796873.com-竞彩官方网站计算器| www.893111.cc-休育彩票大乐| www.967348.com-网络黑彩破案困难吗| www.lx01.com-中国福彩网走势图| www.14tw.com-安徽体彩十一选| www.td46.com-福彩都有哪几种彩票| www.rw69.com-乐彩客户端下载| www.62yy.com-专业玩彩票开| www.868713.com-7星彩今天预测号码| www.25152.cc-彩铅自学难吗| www.521378.com-我要加体彩群| www.635837.com-彩虹六号中墨冰概率| www.730928.com-易彩网福彩3d字谜| www.331236.com-南方双彩走势图大全| www.87rm.com-宏达彩票怎么注册| www.2475.xyz-足彩推介网258| www.719856.com-七星彩复式投注格式| www.wo9.com-河北省快三遗漏数据| www.250887.com-豪彩注册平台| www.312139.com-彩票话术大全| www.375550.com-全民中彩官方| www.002229.com-七乐彩投注金额表| www.068015.com-可以出票的假彩票机| www.0551.tv-彩票趋势-| www.595596.com-彩票被冒领-| www.652465.com-福彩中奖领取| www.252510.com-彩票比例倍投技巧| www.954584.com-瑞彩祥云返点邀请码| www.233258.com-北京体彩官网首页| www.407177.com-苏州彩铃制作| www.518773.com-生女孩的彩票号码| www.647073.com-足彩中奖心得| www.711903.com-e彩堂软件-| www.781230.com-微彩软件-| www.71ju.com-中彩缘网-| www.6390.vip-福彩红孩儿双胆| www.225171.com-宝马彩票平台下载| www.837151.com-立彩彩票软件可靠吗| www.951705.com-博众取彩-| www.073844.com-体彩排三杀号定毒胆| www.cai8477.com手机彩票网站| www.cai750.com-快三大小规律破解图| www.53of.com-福彩双色球一注| www.29uz.com-彩铅画教程简单好看| www.1680.win-彩票倍投计算器安卓| www.07551.com-中彩那天课文图片| www.317124.com-火箭彩票网vip版| www.022804.com-彩世界苹果app| www.203169.com-体彩p3-| www.944449.cc-中国体育彩票赚钱吗| www.cg94.com-福利彩票江西快三| www.7516.loan-体育彩票门店| www.ww93.com-彩票开奖排五走势图| www.99fp.com-柏林娱乐时时彩骗局| www.53059.com-分分彩是真是假| www.w35.com-天彩粮陕食尚骗局| www.65kh.com-浙江省彩票开奖号码| www.923112.com-108彩票官网登录| www.973962.com-手表每天快三秒| www.95lg.com-网上男友让我买彩票| www.487200.cc-足彩复式转9软件| www.975670.com-正规网上买彩app|