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.aliyake.com.cn</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天

知道了
百盈PK10 www.904158.com-彩票合买怎么分钱| www.290004.com-内蒙古福彩快时时彩| www.4670.biz-大乐透酷彩吧真的吗| www.327398.com-连红彩票app入口| www.369449.com-福建体彩聊天室现场| www.0817.win-足球彩票在哪里买| www.9as.com-中国体育彩票好做吗| www.5123.top-高彩霞-| www.62756.cc-今天体彩排列3开奖| www.216271.com-3d彩票玩法-| www.987102.com-彩迷网怎么样| www.7946.biz-博彩学院-| www.224366.com-快乐彩票手机版| www.741982.com-湖南彩体育彩票| www.759888.cc-时时彩宝典开奖记录| www.7160.cn-彩票8亿官方端口| www.664255.com-牛爹七星彩头尾资料| www.845645.com-竞猜型彩票怎么注册| www.94bi.com-福建体彩中心搬迁| www.09233.com-彩29网页-| www.86860.cc-广州鸣彩客服| www.6978.wang-福彩中奖多久到账| www.1728.bid-彩票玩家数据| www.39529.cc-北京体彩网可以买吗| www.88194.com-小站宝彩票ios| www.055859.com-体育彩票有四位数字| www.132273.com-河南濮阳范县彩礼| www.255871.com-赢彩票app靠谱吗| www.331036.com-81彩票注册-| www.442542.com-易记彩票是真的吗| www.936876.com-四季彩票登录一| www.799048.com-精彩头条-| www.cai1250.com江苏福彩快3| www.058.blue-体彩排例3开奖号| www.347521.com-700万彩票网注册| www.518904.com-乐米彩票官网查封| www.670618.com-福彩3d和值对照表| www.830978.com-快乐彩网址| www.4099.cn-彩票77软件苹果| www.td60.com-赢彩彩票官方| www.4039.biz-网易彩票863| www.351811.com-315彩票-| www.438311.com-出名的彩票销售平台| www.564885.com-福彩杀码定胆方法| www.38225.cc-2019购彩app| www.079020.com-新疆竞彩快三查询| www.521118.com-3d家彩网开机号| www.82499.cc-香港体彩快三| www.136689.com-大同福彩中心电话| www.525120.com-可以玩圣地彩的台子| www.989752.com-怎么下载乐彩网| www.445657.com-微信h5彩票源码| www.hb55.cc-福彩3d吧百度贴吧| www.612519.com-3d福彩和值表彩图| www.316869.com-福彩图片大全| www.sz13.com-体彩7星彩几点开奖| www.101605.com-9万彩票aqq-| www.0485.cm-河南省福彩领奖地址| www.44nf.com-七彩假期态度恶劣| www.288721.com-竞彩中大奖-| www.690605.com-盈彩彩票app下载| 500彩票www.66653m.com| www.956046.com-福彩双色球字谜汇总| www.c6.cm-爱乐彩平台关了| www.rl93.com-大发快三怎么刷反水| www.33.cm-体彩种类及玩法| www.66fn.com-星游时时彩官网| www.0801.com-彩票刷码是什么意思| www.6375.cc-彩6最新版本下载| www.13421.com-网络彩票诈骗| www.63767.com-竞彩网胜平负| www.020667.com-福彩总部-| www.093875.com-北京时时彩高频彩票| www.159888.com-七星彩高清早版版| www.232299.com-今天足彩十四场对阵| www.cq67.com-瑞彩祥云app下载| www.036640.com-福彩3d分析软件| www.312001.com-修改快开彩票| www.091210.com-八号彩票登陆网址| www.916160.com-怎么代理彩票投注站| www.226085.com-福彩排列3开奖结果| www.338450.com-七乐彩专家胆码预测| www.456233.com-彩票贪-| www.717959.com-福彩七乐彩玩法说明| www.25527.cc-彩客网完整版比分| www.86189.cc-中国体彩360| www.103470.com-广东新粤彩每期报| www.310844.com-快乐彩坐标-| www.xr66.com-彩票靠运气吗| www.7263.in-彩虹4无人机发动机| www.053456.com-足彩购买-| www.5278.tv-凤凰彩票时时彩下载| www.017759.com-彩票投资网-| www.581635.com-中园体育彩票网站| www.928383.com-打彩票的技巧| www.2594.pw-四川电信彩铃| www.0358.pro-体彩金码关注码今天| www.05544.cc-类似于宏大彩票| www.82225.com-香港竞彩快三| www.129496.com-众彩娱乐下载地址| www.252186.com-中彩在线邮件| www.179001.com-内蒙古快三选号技巧| www.554995.com-我国体彩发行时间| www.42qx.com-彩钢棚做法详细图解| www.hl21.com-福彩3d字谜字画| www.72263.com-顶呱刮彩票利润| www.746824.com-加拿大3.5分彩官| www.893673.com-爱投彩票苹果下载| www.414196.com-精釆与精彩的区别| www.52ly.cc-足彩量化模型下载| www.6716.top-上饶福彩中心电话| www.510726.com-彩虹屁素材-| www.26al.com-互联网销售彩票| www.0506.top-中囯彩吧更懂彩民| www.5538.in-彩虹宝宝图片大全| www.069893.com-福利彩票3d入门| www.224025.com-福彩站赚钱吗| www.324624.com-香港球彩台有软件| www.455804.com-彩票大奖都是托| www.592898.com-隐形的彩虹-| www.718759.com-有关彩虹的美好寓意| www.827852.com-彩民彩票怎么下架了| www.943321.com-广西体彩在哪| www.238160.com-中国福彩网彩种| www.633266.com-篮彩m串n-| www.562.cc-七彩乐开奖结果| www.3702.cm-精彩十分图标| www.9383.org-tt彩票app闪退| www.48123.com-湖北快三害死我了| www.081301.com-双色球彩票必中咒语| www.179422.com-杏彩168彩票网| www.262026.com-玩快三输了好几万| www.35719.com-竞彩网骗局-| www.43jt.com-下载网易彩票软件| www.022936.com-彩托一个月工资多少| www.236637.com-竞彩篮球比分直播| www.12144.com-快三推测专家助手| www.095992.com-广东省体彩福彩开| www.237979.com-吉林快三大小破解| www.377251.com-腾讯时时彩开几期| www.947096.com-彩世界软件手机版| www.509518.com-彩票500网走势| www.173643.com-快三属于合法的吗| www.000457.com-时时彩盈利25万| www.55072.com-恒彩彩票账号注册| www.36ym.com-极速时时彩app| www.31277.com-彩票大家乐怎么下载| www.aj67.com-七星彩论坛-| www.13fd.com-快三二同号一注多钱| www.635444.com-怎么打水博彩| www.786236.com-时时彩系统下载| www.zp39.com-时时彩什么叫半顺| www.436077.com-四川省福彩官网| www.119364.com-福彩3d最新开奖| www.196701.com-彩票快三分析软件| www.278836.com-大发快三计算公式| www.0828.bid-擅自互联网售彩| www.226921.com-菠萝彩3d魔图下载| www.2777.win-网彩计划骗局揭秘| www.700544.com-专业购彩大发彩票| www.111596.com-四海彩票-| www.672626.com-福彩3d双胆彩票网| www.874581.com-35选7彩走势图| www.979342.com-江苏体彩投注器|