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

知道了
彩01彩票 www.420771.com-东方彩票开奖网| www.351797.com-彩票输-| www.032657.com-赛马派彩-| www.32532.com-3d彩报图今天老虎| www.44ks.com-江苏快三共多少期| www.5892.site-广东彩礼多少| www.38596.cc-爱尚彩app下载| www.016966.com-福彩3d计算器| www.476820.com-福彩五分彩app| www.823928.cc-乐彩网p3字谜| www.774780.com-黄金8彩票网可靠吗| www.876581.com-彩票刷水套利| www.953918.com-瑞祥祥云彩票合法么| www.wd3.com-大乐透彩宝业网| www.97528.cc-福利彩票123等奖| www.085123.com-福彩三地振幅图| www.174464.com-快三哪些省不买了| www.326962.com-全国彩票试机号| www.037981.com-喜盈门彩票有谁在玩| www.292732.com-彩票没人领河南| www.373689.com-大家赢彩票是黑彩吗| www.506411.com-纵彩娱乐骗局| www.575894.com-山西福彩双色球开奖| www.647414.com-分分彩太假了| www.729643.com-彩票3d大奖得主| www.810775.com-七彩乐历史开奖| www.883895.com-易彩票平台-| www.949081.com-快购彩票下载| www.997436.com-中彩网上海快3| www.gn92.com-内蒙的快三-| www.7305.vip-彩虹六号怎么玩| www.60008.com-彩票机多少钱一台| www.8598.in-彩宝贝网工具| www.133198.com-天津彩钢围挡报价单| www.054567.com-中国福利彩种| www.987541.com-黑龙江福彩20分| www.223550.com-足球彩票开奖| www.553776.com-竞彩停赛了怎么算| www.93513.cc-800万彩票-| 6678彩票www.2988cai.com| 凤凰彩票www.55228l.com| www.01870.com-秒送彩金游戏| www.990202.com-互联网售彩最新消息| www.325802.com-体彩排三彩经网| www.1069.cn-老挝时时彩诈骗| www.02737.com-宁夏体彩票十一选五| www.144312.com-竞彩下盘什么意思| www.781131.com-网上玩彩票输了| www.577554.com-七星彩现在开奖直播| www.178882.com-幸运快三走势图| www.71629.com-彩票3d试机号今日| www.056651.com-合肥彩票站-| www.252013.com-送彩金32元可提款| www.556530.com-彩票双色球字迷| www.137900.com-手机qq彩票怎么买| www.232833.com-彩票号码预测神器| www.358402.com-浙江福利彩票兑奖| www.488600.com-七乐彩全部中奖号码| www.53528.cc-grt彩票-| www.634560.com-17046胜负彩| www.770508.com-时时彩停止2019| www.861762.com-体彩开奖公告图| www.979242.com-福彩票什么时间开奖| www.cp7978.com-内蒙福彩快3| www.h23.pw-快三几点开始| www.73ho.com-耽美巨肉3d彩漫| www.5241.vip-福利彩票一天销售额| www.56741.com-带赢彩票-| www.0472.date-京东彩票微信客服| www.7895.top-3月6日福彩3d| www.75zy.com-福彩三d天罡八卦图| www.xu1.com-湖北省福彩开奖| www.u77.xyz-新彩吧网站首页| www.18300.com-怀化市福彩中心地址| www.7208.cc-中国彩票税-| www.33623.cc-彩票冷热交替规律| www.92800.cc-力彩刻字机-| www.25op.com-ig传统彩赛车优惠| www.614009.com-苏氏彩票社区| www.031080.com-九龙彩票官方网站| www.820024.com-微博买彩票怎样兑奖| www.945204.com-235彩票网-| www.cp644.com-人人彩票下载安装| www.770127.com-好彩彩票网-| www.79960.com-安徽福彩一定牛| www.580238.com-六开彩结果-| www.673234.com-中彩双色球开奖结果| www.748722.com-快彩邀请码-| www.188474.com-安徽快三官网查询| www.89mb.com-彩漂能洗黑衣服么| www.ro01.com-北京快三垮度形态图| www.217265.com-湖北快三今天开奖i| www.286672.com-挂彩票怎么中奖| www.339796.com-唐山彩票站转让| www.252050.com-c168彩票-| www.741198.com-体彩跟双色球的区别| www.898411.com-福利彩票拍照查询| www.959536.com-彩名堂网页版| 天际彩票www.tj92.com| www.hr23.com-海南东方快三开奖| www.y94.com-全国有多少个彩票站| www.090925.com-深圳体彩兑奖中心| www.257.me-竞彩开奖查询| www.726136.com-彩票倍投软件| www.5223.xyz-温州体彩兑奖流程| www.292559.com-贵州福彩快3中奖| www.498572.com-彩票有没有破解方法| www.220415.com-福彩快三跨度怎么算| www.340494.com-牛彩网一彩搜| www.508001.com-唐龙彩图版-| www.604360.com-体育彩票对奖查询| www.680219.com-江苏快三官方注册| www.748205.com-卜算子彩票app| www.810628.com-澳客竞彩开奖网站| www.879714.com-时时彩快3-| www.944438.com-体彩竞彩骗局| www.998941.com-头条彩票频道| www.af87.com-体育彩票投注官网| www.ol20.com-牛彩藏机图汇总| www.2gv.cc-体育彩票挣钱吗| www.00635.com-北京快三导师微信号| www.944340.com-希望手游彩票app| www.137689.com-体彩3p的开奖号| www.243025.com-新快三走势图广西| www.331352.com-福彩票3d走势图| www.8333.org-菲律宾时时彩代理| www.410091.com-彩票新浪彩票网| www.042424.com-除了福利彩票广告| www.62991.cc-158彩票是真的吗| www.027610.com-易彩堂能提现吗| www.064382.com-足彩竞彩500万| www.178716.com-安徽快三开奖号码哇| www.3332.mobi-彩票特别号如何预测| www.243099.com-快三福彩下载安装| www.377357.cc-qq彩票怎么找不到| www.896382.com-经典彩app-| www.cm4.com-福利彩票理念| www.3395.mobi-1077彩票app| www.120718.com-七星七彩开七奖结果| www.119459.com-髮彩-| www.179563.com-北京快三技巧| www.260369.com-福彩快三犯法吗| www.59293.cc-福彩站点如何申请| www.853955.com-时时彩盈利25万| www.914070.com-江苏快三资料图| www.979322.com-三分彩后一规律| www.aa50.com-快三是不是时时彩| www.4683.xyz-一年几期彩票| www.069071.com-彩票注册绑卡送59| www.al80.com-彩票中奖查询明细表| www.372710.com-八彩娱乐app| www.470776.com-彩名堂下载网址| www.540620.com-福彩3d谜底-| www.622285.com-湖北竞彩快三| www.679179.com-中国福彩刮刮乐扫码| www.749479.com-旺彩大乐透开奖号码| www.805373.com-七乐彩中奖新的| www.860909.com-腾讯十分彩开奖查询| www.912562.com-微信美女时时彩骗局| www.965374.com-玩快三输了怎么回血| 500万彩票www.w408.com| www.sj1.cc-江西体彩网-| www.4398.xyz-福彩3d精确八卦图| www.302821.com-38博白菜博彩论坛|