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.lyddedu.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天

知道了
彩票123现在叫什么名字 www.84962.com-国家福彩江苏快三| www.112287.com-云顶彩票网址是多少| www.200083.com-彩票开奖结果彩宝贝| www.284386.com-中国彩种有哪些| www.423163.com-体彩图标logo| www.531659.com-新生彩票登录地址| www.623581.com-21彩票下载-| www.703445.com-福彩3d彩票小狂人| www.787643.com-彩经网排三胆码预测| www.870322.com-网上买彩票大小单双| www.978571.com-粤淘彩票怎么注册| www.dh6.com-时时彩开奖结果奖| www.pt15.com-辽宁快三查询结果| www.03hw.com-彩票与投资报刊| www.76rp.com-七乐彩摇奖直播视频| www.1880.in-彩108彩票-| www.9832.in-福彩网电脑版| www.53712.com-重庆老版时时彩宝典| www.000569.com-中国销售彩票史| www.069246.com-好运福彩网站| www.136065.com-广西体彩中心在哪里| www.215677.com-十二生肖彩票怎么买| www.293712.com-彩神通三码会员| www.371399.com-彩票站转让合同无效| www.476779.com-财富彩票安全吗| www.561329.com-体彩大乐透93| www.634104.com-北京市彩票咨询中心| www.812948.com-手机钢化彩膜怎么贴| www.886326.com-好运来彩票下载| www.972280.com-体彩排列3开奖号码| www.cp1770.com-彩票快三合法么| www.mj37.com-网络彩票提款被拒| www.1fo.com-大发彩票是什么意思| www.58ip.com-中彩啦客户端下载| www.0310.cc-福利彩票中奖算法| www.8119.net-福彩快频彩app| www.28262.com-湖北快三国家开奖| www.71058.com-褔体彩开奖结| www.055000.com-足球竞彩比分结果| www.136248.com-下载梦想彩票| www.211933.com-手机购彩软件哪个好| www.282989.com-黑客破解彩票| www.384589.com-彩票的社会影响| www.505143.com-注册给彩金网站| www.576349.com-江西快三百度贴吧| www.650376.com-小班健康彩虹伞教案| www.755808.com-河北快三号码推崇| www.840428.com-竞彩奖金优化好吗| www.907917.com-七星彩中5个多少钱| www.970427.com-彩票赚佣金的方法| www.jo90.com-网络刷彩是什么| www.c09.top-爱彩乐福彩快三| www.29yy.com-用彩铅画眼睛| www.799.cn-台湾今彩539开奖| www.4917.top-中国体彩票查询| www.00603.com-福彩3d定位走势图| www.63386.com-足彩19042难度| www.020049.com-彩票手机怎么提现| www.089058.com-中国彩票中奖号码| www.152142.com-竞彩看盘网站| www.257651.com-卓易彩票-| www.326602.com-苏会文七星彩| www.393900.com-福利彩开奖号码查询| www.532436.com-临沂市体彩兑奖中心| www.611383.com-彩虹世界下载安卓版| www.681455.com-福彩带连线的专业版| www.757023.com-超彩彩票-| www.860136.com-体育彩票几天| www.922376.com-吉林快三预测单双| www.977631.com-世界杯足彩分析| www.ag40.cc-买彩票快三技巧| www.qp16.com-一分快三内部计划| www.79.gg-六开开彩开奖结果| www.64ns.com-福彩票三d电子晚报| www.0858.pro-2019最新博彩| www.8573.net-安徽福彩兑奖中心| www.35852.com-头条彩票是怎么回事| www.78155.cc-华夏彩票大发快三| www.025749.com-开私彩-| www.096218.com-四川体彩中心官网| www.156731.com-彩票扫码兑奖| www.278522.com-彩票计划群24小时| www.359776.com-凤凰彩票平台怎么样| www.443174.com-今天双彩球开奖结果| www.529895.com-重庆时时彩计划小鹿| www.626685.com-网易彩票邀请码谁有| www.690883.com-500彩票网斗牛牛| www.762222.com-竞彩投注平台| www.863831.com-体彩排列三走势图儿| www.926279.com-旺旺彩票靠谱吗| www.977812.com-篮球彩票在哪买| www.qj2.cc-彩票导师是真的吗| www.pd56.com-下载发彩网-| www.2jm.cc-彩皇网乐彩-| www.50uf.com-足彩复式过滤| www.532.date-分分彩诈骗-| www.4089.org-彩虹七号游戏简介| www.9077.me-七彩乐什么时候开奖| www.63998.cc-足彩就是坑-| www.016758.com-彩票代购网站合法| www.078965.com-彩票77软件疼牛| www.133861.com-好彩1开奖走势| www.201541.com-体彩开奖视频app| www.265132.com-安徽快三遗漏统计| www.377692.com-618彩票快三| www.484873.com-新彩华章新华网| www.556113.com-甘肃福彩快3中心| www.615104.com-手机快三怎么玩的| www.677126.com-不用本金的彩票兼职| www.749084.com-苏州快三是什么彩票| www.808480.com-丽彩集团董事长郁鹏| www.875481.com-安徽快三计划群| www.989266.com-乐彩彩票软件| www.cp7776.cc-快三中奖金额对照表| www.kx36.com-福彩快三爱彩乐| www.a23.org-福彩标志图片| www.22vh.com-体彩出什么号了今天| www.2891.com-酷彩吧可信吗| www.7873.cn-彩坛至尊资料大全| www.22002.com-中国500万彩票网| www.59667.cc-下载江西快三| www.030035.com-天津彩民之家| www.099961.com-豪门娱乐彩票| www.155973.com-好彩客怎么下载的| www.254819.com-好彩网下载-| www.315797.com-彩虹5无人机首飞| www.375305.com-南海彩票论坛七星彩| www.507792.com-老徐说彩今日p3| www.573055.com-时时彩网购-| www.637318.com-彩虹5动力-| www.737618.com-qq彩票竞猜金豆| www.802164.com-彩29网站-| www.868899.cc-福建省体育彩票| www.947751.com-爱彩乐黑网-| www.988993.com-手机搜狐彩票| www.cai9322.com七星彩今晚预测| www.in80.com-齐鲁风采福利彩票| www.xr35.com-赔率高的彩票平台| www.08xg.com-彩票合买领奖| www.67mj.com-全国彩票销量排名| www.0270.cm-彩票投注站怎么盈利| www.8556.vip-安徽省福彩管理中心| www.33659.cc-福彩3d精准3注| www.69985.com-彩运8开奖可靠吗| www.026545.com-泰国利记博彩| www.089670.com-彩票套利是怎么套的| www.142673.com-8彩网址登录| www.206563.com-体彩屋购彩大厅| www.267873.com-彩神吉林快三全能版| www.379199.com-双彩论坛字谜总汇| www.480157.com-彩票中奖的算法公式| www.549411.com-138彩票下载| www.625909.com-双色球彩宝贝预测| www.682869.com-金店会回收彩金吗| www.750425.com-手机体育彩票靠谱吗| www.807393.com-足彩2串1计算公式| www.873438.com-心脏彩超正常值图| www.963807.com-福彩跨度遗漏| 彩经彩票www.22270.com| www.an49.com-贵州快三推荐号| www.oj42.com-云南福利彩票| www.3da.com-仲博是黑彩吗可靠吗| www.45qf.com-厦门体彩店转让| www.157.me-微信彩虹昵称|