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.mangefushi.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.zl32.com-幸运彩票做单骗局| www.yt02.com-今日甘肃快三结果| www.139797.com-下载竟彩足球| www.713805.com-乐彩3d论坛静态枚| www.455456.com-聚乐彩jlc-| 好运来www.998855aa.com| 福彩网www.60007m.com| www.062488.com-安卓彩票228| www.281018.com-时时彩包胆计划技巧| www.2299.live-山东好彩快三计划| www.03325.com-七星彩是诈骗| www.299.website怎么玩彩票稳赚不赔| www.9151.biz-浙江体彩6加1开奖| www.73512.com-彩票软件8816| www.062225.com-天天中彩票合法吗| www.179921.com-湖北快三今天开奖号| www.tf44.com-彩票追杀系统| www.844949.com-福彩业务知识| www.954019.com-福利彩票靠谱吗| www.ts.com-中国竞彩网胜平负| www.44832.com-百胜彩票网会员登陆| www.172567.com-合肥快三彩票走势图| www.268004.com-湖北快三260计划| www.345463.com-五分彩走势图怎么看| www.451166.com-七乐彩新浪网| www.544212.com-福彩第2版-| www.884737.com-澳客大乐透彩票网| www.989989.cc-彩漂哪个牌子好用| www.os91.com-广西快三怎样| www.05fz.com-彩铅画用什么笔勾线| www.313069.com-体彩7位数开奖结果| www.492292.com-排列五走势图彩票| www.1199.pw-香港好彩网免费资料| www.53235.com-甘肃快三的打法| www.042626.com-网上足彩容错怎么买| www.950791.com-噢克彩票网-| www.fw60.com-河南481彩票网| www.980429.com-成功彩票怎么样| www.df83.com-瑞彩祥云彩票网站| www.d16.club-彩票开奖公告奖| www.56pl.com-北京体彩一等奖| www.889.in-网上时时彩违法吗| www.6508.cn-想开个彩票平台| www.18273.com-台湾五分彩是骗局吗| www.979528.com-好彩印第安铁盒香烟| www.131569.com-咸阳彩票中奖| www.861720.com-腾讯时时彩开奖历史| www.6442.vip-豪彩投是什么意思| www.060924.com-中国快三人人3登陆| www.775258.com-彩票511合法吗| www.622778.com-红牛彩票是什么| www.723972.com-78彩票骗局-| www.811354.com-彩蛋游戏-| www.887171.com-最权威的足彩app| 火星彩票www.hx6666.com| www.2608.wang-体彩6+1规则| www.sy69.cc-吉林快三微信群骗局| www.959956.com-足彩职业玩家| 众乐彩票www.684944.com| www.jv55.com-河北快三在线购买| www.c25.in-彩神密聊-| www.460008.com-内蒙福彩兑奖地址| www.562030.com-福彩3布衣图库| www.871459.com-体彩排列三杀码图| www.949391.com-福彩dd龙卷风胆码| www.cp04.com-上海福彩快三走势图| www.22587.com-福彩杀图-| www.437844.com-天天彩票集团是| www.6720.vip-广东好彩36机选号| www.688040.com-九州彩票网站多少| www.j06.cn-支付宝中彩票| www.49ct.cc-彩经网3d遗漏统计| www.234175.com-安徽省福彩领奖流程| www.711908.com-万豪彩票官网| www.807345.com-那个网站可以买彩票| www.44218.cc-彩易网字谜图谜大全| www.84777.com-聚彩彩票是骗人的吗| www.486553.com-附近哪有福彩销售点| www.595217.com-快彩王k3447| www.667629.com-打彩球的游戏| www.755729.com-多彩贵州网首页投票| www.985483.com-五分快三助手下载| www.im12.com-首页购彩大厅| www.363835.com-彩虹漫画男-| www.112598.com-七星彩全部历史开奖| www.257679.com-038彩票正规吗| www.241164.com-彩铅画兰花-| www.748339.com-红彩票app-| www.01cs.cc-写自然景物彩虹作文| www.763978.com-看彩票下什么软件| www.898082.com-概率学的彩票原理| www.971464.com-玩彩票赚钱吗| 多彩网www.745557.com| www.76824.com-怎么玩彩票-| www.26303.cc-竞彩篮球玩法介绍| www.0706.vip-体彩退机申请文本| www.9707.org-转让福彩机怎么过户| www.03sf.com-彩票平台菜鸟| www.21114.cc-陌陌好友拉人玩彩票| www.266365.com-一分钟快三趋势| www.301.la-龙彩娱乐黑钱| www.50373.com-彩票网站制作有哪些| www.053882.com-盛世彩票-| www.768778.com-粤淘彩票官方网站| www.307520.com-重庆体彩网-| www.447113.com-福彩演播室周周抽奖| www.596303.com-福彩通选-| www.668502.com-体彩太湖字谜| www.782411.com-贵州体彩网大乐透| www.875444.com-快钱彩票骗局| www.945948.com-乐吧8彩票-| www.984519.com-爱彩乐双色球遗漏| www.in22.com-105彩票网-| www.86mw.com-乐彩网快3下载| www.4301.cm-3d今天小小虎彩报| www.859757.com-456彩票-| www.7759.com-彩票中奖者死亡| www.94998.com-噢客彩票网下载| www.31ra.com-金承志彩虹合唱谱| www.6188.me-丹东图迷牛彩图| www.51233.cc-晓风彩票软件下载| www.r52.cc-彩票网站不给提现| www.449990.com-爱买彩票的男人心里| www.093625.com-开彩彩票app| www.162217.com-竞彩篮球彩票| www.56727.com-腾讯时时彩规律口诀| www.019843.com-时时彩中彩票| www.097532.com-中国体育彩票刮刮卡| www.q81.org-体育彩票数字范围| www.42oi.com-时彩稳赚技巧| www.200017.cc-1分快三计划稳定| www.ov18.com-广西快三计划群| www.739240.com-福利彩票专家杀号| www.998848.com-那有香港行政快三玩| www.pb32.com-河北福利彩票开奖| www.897587.com-体彩足球胜平负查询| www.964052.com-福彩3d教父可信吗| www.cai0003.com快三玩法技巧规律| www.003750.com-2元网彩票走势图| www.qc67.com-网络购彩2019| www.835927.com-青海省福利彩票管网| www.923125.com-七星彩近十期走势图| www.989649.com-国民彩票网站| www.ea5.com-青海快三规律破解| www.ke64.com-山东福彩群英会软件| www.zl31.com-乐米彩票入口| www.977085.com-好彩官方网站| www.cp830.cc-彩神-| www.ji73.com-中国福彩网彩种| www.xn08.com-快彩在线是什么情况| www.48.me-3地彩吧图库| www.949167.com-时时福彩下载| www.566972.com-一分快三怎么买豹子| www.090073.com-全球彩票qqcp| www.858401.com-快乐网快三的玩法| www.942319.com-刚力彩芽mv-| www.986346.com-彩票助手吧-| www.zw3.com-体彩6十1玩法| www.964331.com-海南体育彩票官网| 福利彩票www.99677l.com| www.68011.com-微信彩票游戏| www.9210.vip-福利彩票和什么一起| www.921945.com-约彩365无法注册| www.981742.com-彩票刷水套利软件|