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.tune66.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.378400.com-中国双色球福利彩票| www.342626.com-快发彩票平台| www.sk4.com-体育彩票怎么看中奖| www.m91.net-十大黑彩-| www.cp833.cc-福彩快3扫码下载| www.356141.com-正信娱乐分分彩挂机| www.788685.com-怎么看足彩投注量| www.885895.com-彩霸王论坛-| www.961887.com-时时彩单双大小规律| www.cp6033.com-新彩吧3d字谜| www.f22.hk-航天彩虹军工四证| www.627636.com-多乐彩走势图解| www.701339.com-获取彩金是违法吗| www.785085.com-小米福彩-| www.001354.com-大发快三太假| www.092876.com-买篮球彩票的软件| www.949131.com-电脑彩屏-| 大赢家彩票平台www.186972.com| www.239949.com-五百彩票网-| www.8695.xyz-女的介绍你玩彩票| www.ly65.com-彩之家下载苹果| www.904098.com-吉林福彩网快3官网| 创富彩票www.cf9906.com| www.332946.com-凤凰彩票破解方法| www.591356.com-博彩公司snai| www.4930.xyz-01彩票客服-| www.hh38.com-彩票倍投就是死| www.rv64.com-一定牛彩票11选5| www.011326.com-周五彩票什么开奖| www.077455.com-体育彩票中大奖号码| www.517008.com-入侵黑彩服务器技术| www.696108.com-36o足彩-| www.956380.com-最新彩票软件| www.ql91.com-立彩快3下载| www.17217.com-下载3中国福彩| www.kj71.com-河北时时彩快三| www.066006.com-私彩投注改单| www.46474.com-怎么下载时时彩宝典| www.962455.com-500万时时彩| www.pt21.com-乐猫彩票app| www.301157.com-万彩吧app-| www.576222.com-彩票的基础知识| www.852147.com-唯彩看球官网网页| www.f88.loan-华人彩漂测速版| www.08676.com-福彩迷怎么样| www.2495.cc-玩彩app提现| www.730293.com-11选五彩票软件| www.955935.com-最近足彩胜负彩预测| www.38bw.com-青蛙彩立即前往| www.585992.com-网上彩票赌博靠谱吗| www.865961.com-易迅彩票下载| www.996883.com-体彩大乐透机选一注| www.vh37.com-23彩票下-| www.084377.com-下载70彩票-| www.838558.com-上期七星彩-| www.917654.com-彩库宝典下载到手机| www.978396.com-彩色透水混凝土设备| www.cp8268.com-上海福利彩票快3| www.27525.com-彩票走势大全| www.73998.com-体育彩排列五结果| www.426616.com-诚信可靠的足球彩票| www.29156.com-怎么用话费买彩票| www.065935.com-彩虹六号吧-| www.537150.com-哪个网站买彩票靠谱| www.890208.com-时时彩购买软件网址| www.966578.cc-澳门五分彩平台| www.fi8.cc-时时彩1996-| www.657291.com-福彩大厅游戏机| www.728984.com-福彩3d天天吉论坛| www.291778.com-鸿彩直播软件| www.007388.com-福彩的开奖结果| www.907762.com-秘梦解图七星彩奖表| www.973302.com-彩虹岛有手游吗| www.cp717.cc-福彩网骗局-| www.qk88.cc-立彩屠龙软件下载| www.539430.com-彩票是不是假的| www.789686.com-黑彩票平台违法吗| www.963256.com-彩钢瓦价格-| www.je67.com-3d福利彩票下载| www.818778.cc-绵阳福彩官方网站| www.ga29.com-彩计划-| www.005747.com-时时彩系统彩源码| www.182310.com-足彩比分-| www.176831.com-彩票的qq群-| www.356757.com-公司送彩票608万| www.212626.com-私彩平台赚钱套路| www.707267.com-竞彩足球今日强胆| www.239218.com-福彩3id今晚推荐| www.145046.com-福彩3的最新杀码| www.821229.com-狐不归福彩-| www.gs44.com-好彩三奖金查询| www.477449.com-彩神通内部-| www.by73.com-非凡彩票是正规的吗| www.346099.com-彩福网最新码报结果| www.111959.com-500go彩票-| www.74446.cc-3d彩票选号技巧| www.003564.com-盈彩网充值-| www.668120.com-彩票店上班注意什么| www.791711.com-体彩金七乐最准规律| www.51jn.com-足彩过滤和缩水| www.842854.com-福彩2元刮刮乐| www.905017.com-江苏快三开奖结果漏| www.965935.com-96彩票网官方网站| 天天彩票www.54968f.com| www.db80.com-四亿彩票网站可靠吗| www.su33.com-福利彩票玩法双色球| www.538.tv-重庆时时彩天涯贴吧| www.28603.com-佛法看待彩票| www.99872.com-彩票168app-| www.383516.com-进微信时时彩群号| www.282280.com-彩票最灵中奖神咒| www.iq97.com-快三和值怎么玩| www.646995.com-胜负彩心得-| www.706170.com-天天彩选四中奖号码| www.770278.com-好彩4宝珠-| www.656089.com-福彩三地和值表图片| www.900072.com-51彩虹聊天软件| www.959165.com-购买美国强力球彩票| 开心彩票www.ck6787.com| www.60566.cc-51彩虹app-| www.111616.cc-广发彩票平台怎么样| www.586818.com-微彩吧是黑网吗| www.642400.com-福彩双色球宣传图片| www.702308.com-三分快三信用彩票| www.765352.com-快三一分钟一期计划| www.860802.com-河南福彩大星走势图| www.949690.com-五分快三玩法| 99彩票www.062166.com| www.78187.cc-中福彩3d试机号| www.86999.com-福彩3d组六-| www.393090.com-体彩张驰籍贯| www.297061.com-快三有赢的吗| www.551565.com-联众彩票是正规的么| www.983332.com-竞彩足球软件下载| www.b74.cc-三分时时彩平台| www.202274.com-贵阳福彩官方网站| www.299243.com-中彩娱乐登录| www.7748.in-华亿彩票网站是多少| 500彩票www.51515d.com| www.395821.com-19号的福利彩票| www.992361.com-体育竞彩-| www.3667.xyz-新浪竞彩电脑版| www.2200.in-黑彩快三-| www.691886.com-足彩十四场奖金| www.767972.com-惠普彩色打印一体机| www.820559.com-室内彩色混凝土地面| www.718509.com-彩虹寓意着什么意思| www.789147.com-今天竞彩14场| www.861671.com-体彩7星彩中奖查询| www.933527.com-彩票大奖去哪里兑奖| www.989376.com-彩店818软件| www.je24.com-安徽福利彩票官网| www.293020.com-易彩娱乐官方下载| www.388251.com-华彩集团捐赠| www.395848.com-体彩星期走势| www.976227.com-说彩礼的精辟句子| www.rk83.com-快三路线北京末班车| www.79kd.com-中彩冈3d推荐号| www.070317.com-乐8彩网站-| www.323563.com-中国福彩中心开奖| www.89571.com-577彩票安卓| www.313698.com-彩票软件哪个好哪里| www.606339.com-网上多家足彩停售了| www.832868.com-788彩票网靠谱吗|