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.wzztx.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.126626.com-微信彩票群骗局揭秘| www.941114.com-快乐彩票三登录| www.cp2.live-精彩十分玩法奖金表| www.e69.xyz-nba彩票推荐| www.015763.com-南海七星彩投注网| www.131567.com-海口彩礼-| www.590158.com-福彩快3彩票app| www.775357.com-金彩网下彩天空网| www.867315.com-春节彩票停卖时间| www.947599.com-于海彩票案真相| 彩票58www.585277.com| www.wu44.com-天天彩票骗局揭秘| www.655976.com-彩票赔钱经历| www.735119.com-百度彩票123| www.810213.com-彩尊国际是真的吗| www.887036.com-360彩票是否合法| www.967753.com-迪拜有彩票吗| 彩票3www.808523.com| www.ky47.com-上海福彩快三app| www.n43.me-体彩快乐-| www.47qm.com-广西中彩票去哪里领| www.659107.com-下载福彩开奖号码| www.599877.com-体彩能打双色球吗| www.297256.com-河北快三推荐今天| www.726939.com-易点彩票网手机版| www.821902.com-5oo彩票网pc版| www.25fw.com-下彩下载-| www.5339.top-7星彩-| www.432050.com-彩票行家免费资料| www.934319.com-智博微彩城网址下载| www.13434.com-彩票源码出租| www.629117.com-彩票咨询电话| www.91524.com-手机动态炫彩壁纸| www.176971.com-河南快三形态走势图| www.551605.com-粤彩网彩票靠谱吗| www.557791.com-今晚七星彩开奖现场| www.654743.com-福利彩票中福在线| www.757855.com-中彩网怎么挣钱| www.887312.com-亿发彩票是不是骗局| 361彩票www.361gc.com| www.6511.in-福彩快乐8网址首页| 500彩票www.377506.com| www.626895.com-幸运号买彩票| www.744844.com-c02彩票网-| www.840866.com-美甲美睫彩妆店装修| www.940822.com-台北快三有什么规律| 818合彩www.www.9889hc.com| www.mc69.com-正规彩票app| www.57in.com-彩市英雄专家专栏| www.133339.com-下载彩视-| www.026394.com-私彩平台为何不封| www.876840.cc-可以买体彩的软件| www.963661.com-3乐彩网-| www.ry6.com-安徽快三本期预测| 福彩www.26878i.com| www.07aw.com-彩铅星空狼画法| www.308558.com-四川竞彩快三查询| www.128069.com-儿童彩虹简笔画彩色| www.806185.com-快三二同号怎么选择| www.923367.com-买彩票看走势靠谱吗| 易旺彩票www.ywzuqiu.com| www.52880.com-七彩网络查询成绩| www.164902.com-高频彩票倍投计划| www.103204.com-丰彩彩票网站| www.66iu.com-大富翁彩票网址| www.4186.cm-七彩阳光预备节| www.815522.com-长春彩票打票员| www.51sk.com-苏州彩票中奖| www.1060.vip-彩名堂坑人-| www.619520.com-彩票撕了还能兑奖吗| www.98az.com-新博瑞彩票代理| www.4964.top-足彩可以网上领奖吗| www.11297.com-胶东在线烟台福彩网| www.73311.com-天涯彩票故事| www.037332.com-彩经网遗漏值| www.206718.com-吉林快三跨度怎么看| www.312262.com-开心彩票是不是真的| www.335333.cc-红中彩票手机版登录| www.385821.com-福利彩票3d几点开| www.413709.com-时时彩一期8码计划| www.rf67.com-168福彩-| www.61tt.com-体育彩票nba玩法| www.3333.pw-高频彩走势图新浪| www.9658.xyz-3d开奖彩宝网| www.47253.com-福彩双色球中奖省份| www.175973.com-一分快三走势图| www.342466.com-破解3d彩票-| www.496733.com-国际彩票是什么| www.2688.cc-新彩网3d字谜推荐| www.61367.com-家彩搜索-| www.322648.com-体育彩七星彩开奖| www.029897.com-内蒙快三怎么玩| www.4424.net-彩视app-| www.191608.com-福彩七乐彩-| www.397830.com-乐彩票邀请码| www.5510.xyz-浙江新昌双彩梁伟阳| www.96297.com-体彩公益品牌| www.122477.com-时时中彩票平台| www.wk67.com-彩票怎么看走势入门| www.72647.com-云南福彩中心官网| www.119229.com-快三猜大小赚钱| www.248338.com-澳彩app-| www.218940.com-福彩快三3有规律吗| www.345524.com-全民彩票合法不| www.611967.com-河北省体彩中心招聘| www.708115.com-哪个彩票网站没停售| www.780819.com-黑客计划彩票软件| www.887163.com-彩票代玩是真的假的| www.994495.com-好彩客官网首页| www.kv70.com-快三群骗局怎么破解| www.555670.com-体彩大乐透走走势图| www.990964.com-浙江风采网竞彩区| www.3783.bid-吉林快三精准计划群| www.22849.com-腾讯分分彩2配3| www.183037.com-河南福彩快三直播| 新盈彩www.xinyc2.com| www.801329.com-彩猫8-| www.0428.wang-彩缘同志-| www.897813.com-合买彩票鼓励语| www.997142.com-3d彩吧图谜-| www.xk63.com-鑫彩彩票平台合法吗| www.74qn.com-万豪彩票不能提款| www.796436.com-稳赢彩票计划| www.888122.cc-赛马派彩结果| www.982339.com-佰盈彩票是黑网吗| www.cp5.tv-上海快三一定牛预测| www.jk60.com-广西福利彩票官网| www.234224.com-彩神v8安卓版| www.64jt.com-北方老彩民福彩| www.446663.com-足彩单注奖金上限| www.926209.com-福彩500资讯| www.ml15.com-吉林快三选号技巧| www.63fa.com-福彩九宫寻宝图| www.132054.com-彩礼案例-| www.036035.com-彩票修改软件| www.193202.com-乐和彩开奖公告| www.282913.com-五鬼运财符买彩票| www.i41.com-福彩3d宝典图片| www.29mc.com-高返点彩票平台代理| www.560298.com-k8彩票在线网站| www.610084.com-淘宝可以买彩票| www.596856.com-福彩快三稳赢| www.34247.com-彩客网安卓手机版| www.137443.com-彩票返点是什么| www.366454.com-高档彩票店-| www.506119.com-www.86彩票-| www.351626.com-彩票178走势| www.179192.com-河南快三购买| www.992585.com-猜大小彩票有规律嘛| www.ga57.com-发财团队彩票计划| www.p99.cm-快三提前开奖| www.79nu.com-福利彩票快3陕西| www.1668.top-中彩彩票快3违法嘛| www.9523.cc-海南私彩怎么包中奖| www.130983.com-河南彩礼文件| www.215778.com-湖北快三肖立刚推荐| www.275205.com-体育彩票七位数中奖| www.339648.com-开户送体验金彩票| www.2431.xyz-讨个好彩头什么意思| www.826275.com-1077cc彩票-| www.931984.com-分分彩大小稳赚技巧| www.951254.com-500w彩票网pc| www.as13.com-安徽快三跨度分析| www.073685.com-彩票平台代理好做吗|