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

知道了
58福彩 www.529119.com-体彩刮刮乐中奖代码| www.cp273.com-广西福彩快三开奖| www.185736.com-福彩快3中奖查询表| www.950019.com-新宝娱乐彩票app| 中国福利彩票www.08588g.com| www.yt47.com-陕西省体彩中心| www.85lg.com-巴彦淖尔彩票站申请| www.6165.cc-乐盈网彩票| www.48889.cc-世界上彩票最高奖金| www.007092.com-赢彩助手-| www.39409.com-全民彩票真假| www.4480.in-焕彩晚霜主要公能| www.68178.cc-3d经彩网-| www.470547.com-国外足彩公司| www.81477.cc-三分彩平台-| www.085759.com-彩神写真机-| www.179197.com-安徽省快三走势图| www.254127.com-腾讯分分彩挂机稳赢| www.342229.com-快三盈利-| www.456094.com-彩票126官方端口| www.564833.com-体彩天下软件下载| www.sa8.com-彩神88-| 手机购彩www.986799.com| www.cai6665.com快三吉林走势图| www.823933.com-凤彩字谜手机版字谜| www.685541.com-福利彩票官方版下载| www.71592.com-不懂彩票怎么买| www.401678.com-网易彩票资金安全吗| www.802149.com-省福彩中心电话号码| www.704185.com-彩票336cc-| www.863928.com-买彩票输了三万| www.978331.com-彩钢警示条-| www.bl02.cc-彩票分析软件原理| www.140799.com-香港hk免费百彩网| www.947034.com-一分彩技巧想输都难| www.39948.com-彩之家彩票下载| www.8359.xyz-海南七星彩小精英版| www.387108.com-河南体彩快嬴48l| www.34247.com-彩客网安卓手机版| www.9019.cc-百度彩票乐彩| www.77517.cc-赢彩网骗局-| www.53712.cc-重庆时时彩计划51| www.011910.com-星期五彩票开什么奖| www.533525.com-体彩大乐透怎么查询| www.640421.com-彩票那回事-| www.761642.com-美国强力球彩票玩法| www.912472.com-河南福彩网勇士争先| www.985278.com-快乐彩33期-| www.hp89.com-上海快三玩法说明| www.706654.com-香港铂金彩票网址| www.825056.com-3d牛彩涂-| www.919529.com-时时彩搭建出租| www.983656.com-狗万app足彩| www.fc.cc-河北福彩快3走势图| www.030051.com-儿童彩铅画图片大全| www.139557.com-彩之家下载苹果版| www.839619.com-什么是责任彩票| www.092231.com-好运快三百度百科| www.xp81.com-体彩11选5投注| www.522303.com-龙虎彩票技巧方法| www.vt05.com-360彩票开奖对比| www.308392.com-彩票书籍在线阅读| www.259204.cc-红彩会骗局-| www.987299.com-竞彩大小球怎么看| www.80.cn-玩彩票微信提现| www.285256.com-安卓手机彩票软件| www.505809.com-举报网络黑彩| www.784779.com-大胜彩票苹果版| www.022293.com-澳门时时彩是骗局吗| www.24xv.com-双色球兰州彩民| www.94ww.com-一一一彩票平台| www.7149.vip-七彩音符的故事| www.612524.com-彩票每日存送| www.521116.com-怎么玩黑彩赢钱| www.641242.cc-600彩票注册| www.870252.com-福彩3d组选计算器| www.cai82.cc-快三走势图甘肃| www.25586.com-彩库宝典2016| www.020634.com-中国福彩怎么买| www.10dg.com-彩生活物业总部电话| www.5437.vip-福利彩票开奖33期| www.92783.com-在微信上怎么买福彩| www.823441.com-旺美彩铝-| www.952331.com-中了彩票大奖借钱| www.cp6138.com-福彩app-| www.701983.com-有没有人用彩票软件| www.152134.com-手机彩票选号软件| www.9367.online民政部福利彩票窝案| www.061754.com-好彩客靠谱吗| www.4897.net-赌博彩票软件下载| www.245089.com-易彩快3怎么下载| www.332715.com-体彩三字诀-| www.401090.com-七星彩中间值走势| www.1204.org-彩票中奖3亿的山东| www.956072.com-快三彩票网是真的吗| 彩客网www.138037.com| www.sh88.com-重庆5分时时彩| www.78028.com-新浪彩票预测专家| www.83xu.com-花生彩票-| www.bu35.com-好彩票app-| www.986904.com-彩富网资料大全| www.bi34.com-彩71是骗局吗| www.wv93.com-昨天彩票开奖号| www.111532.com-澳洲3分彩全天计划| www.209699.com-黑彩代理怎么拉客户| www.715454.com-微彩吧怎么提现不了| www.826889.com-美狮彩票-| www.930434.com-体育彩票交税| www.cpw| www.6626.com-红财神报彩图| www.491674.com-500cc彩票下载| www.028560.com-乐盈彩票可靠吗| www.547906.com-宏图科技玩五分彩| www.604458.com-大乐彩今晚开奖号| www.664241.com-海南七星彩包头尾| www.721036.com-新福彩网-| www.139201.com-个人彩票软件| www.212861.com-哪个私彩网送彩金| www.270111.cc-快三表格图图片| www.618559.com-体育彩票终端机转让| www.685017.com-3d福利彩票52期| www.400001.cc-46彩-| www.511076.com-我对彩虹的了解| www.589008.com-篮彩比分直播188| www.582.hk-刷彩投资-| www.6913.me-玩时时彩有没有赢的| www.711993.com-彩礼和嫁妆的比例| www.698608.com-贵宾彩资料-| www.783453.com-福彩三地今天藏机图| www.866386.com-手机可以投注的彩票| www.937607.com-好运快三开奖| 网易彩票www.191059.com| www.621883.com-宁波彩票608万| www.675789.com-彩票三等奖在哪里领| www.734567.com-彩色混凝土施工工艺| www.790532.com-360彩票幸运选号| www.847440.com-竞彩足球停售| www.894878.com-六开彩鬼谷子论坛| www.956071.com-快三彩票挂机软件| www.uf9.cc-安徽快三单选单| www.3cv.com-买彩平台哪个安全| www.915636.com-彩票挂机赚钱| www.971564.com-500彩票专家杀号| www.328400.com-彩票精英-| www.382432.com-创名彩票有人带玩吗| www.467864.com-福彩自助终端机功能| www.532989.com-7星彩啥时候开奖| www.664329.com-网易体育彩票频道| www.726832.com-1516app彩票| www.781791.com-彩票与数学-| www.839044.com-山东福彩中心官网| www.898398.com-快三2码遗漏| www.959111.cc-掌上彩福彩3d| 爱彩乐www.343918.com| www.786316.com-双色球福彩大赢家| www.839911.com-为什么要做责任彩票| www.887878.cc-139彩-| www.940443.com-大发手游彩票| www.984397.com-安徵快三时时彩网| www.dt5.com-内蒙快三走势图下载| www.362979.com-福彩二等奖多钱| www.607965.com-云南福彩中心| www.81fn.com-综艺福彩是什么| www.335725.com-福利彩票复式怎么买|