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.sino-agri-tj.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天

知道了
1分快三 www.20fj.com-马竞尤文足彩| www.555719.com-重庆时时彩选号软件| www.654321.com-福彩销售截止时间| www.832079.com-093彩票是真的吗| www.543311.com-天下特彩吧网站| www.630774.com-手持彩色烟雾棒| www.712281.com-外国人结婚要彩礼吗| www.791041.com-三分彩技巧规律| www.869340.com-唯彩会老版本| www.940144.com-重庆福彩官方网| www.995981.com-带你买彩票-| www.be79.com-买彩票的都醒醒吧| www.vf15.com-青岛福利彩票电话| www.39to.com-o83期三地彩票| www.521.xyz-重庆时时彩停机维护| www.178809.com-浙江体彩网-| www.nc21.com-乐米彩票官方网站| www.328867.com-快三怎么买才能赚钱| www.422669.com-荣耀彩票网址| www.550604.com-买彩票中国最大的奖| www.630878.com-手持彩烟-| www.698809.com-彩客彩票310| www.773602.com-重庆时时彩全包稳赚| www.848837.com-彩奕颂唯品会| www.910665.com-著名双彩论坛三句话| www.970694.com-福利彩票结算| 瑞彩网www.820158.com| www.082602.com-118彩下载-| www.807626.com-1997彩票详情| www.910706.com-无精选彩专栏| www.976213.com-河南彩票中奖故事| www.cp3328.com-三分快三平台| www.tl64.com-炫乐彩票是不是真的| www.710011.com-亿彩彩票网址| www.813045.com-微信登录天天中彩票| www.893572.com-乐彩网一分快3真假| www.961517.com-北京快三规律技巧| 500彩票www.51515v.com| www.430469.com-时时彩计划网页版| www.004901.com-上期的体彩中奖号码| www.090400.com-快开彩票新规则| www.177370.com-快三计算器360| www.268244.com-668彩票官网| www.357960.com-彩票3d中奖技巧| www.xq15.com-十一选五彩票助手| www.455660.com-有人用过赢彩专家吗| www.4093.com-荣耀彩票网-| www.898804.com-彩票快三开奖号码| www.973016.com-百胜快三合法吗| www.cp510.cc-福建快三号码| www.218179.com-吉林快三代理| www.59zk.com-体彩排列5贴吧| www.36ld.com-uk彩是真的吗| www.882350.com-淘彩吧论坛金算盘| www.975202.com-汇彩-| www.ap70.com-甘肃快三一定牛推测| www.582048.com-乐玩彩app-| www.av83.com-彩神8app网站| www.435984.com-海口七星彩早版| www.61786.cc-特区彩票七星彩| www.074470.com-北京快三中奖助手下| www.sf58.com-五分彩在线计划预测| www.397749.com-湛江七星彩论坛| www.550867.com-彩票的缺点-| www.667070.com-乐彩网是干什么的| www.774068.com-7星彩开奖结果| www.893597.com-乐彩网广东十一夺金| www.993776.com-凤凰彩票怎么玩啊| www.e34.club-马来西彩票-| www.318727.com-赢发彩票网址| www.422200.com-十七彩票下载安装| www.538925.com-开个彩票店咋样| www.608626.com-万优彩票app| www.689885.com-盛大娱乐彩票网址| www.770727.com-时时彩算法规则| www.837336.com-立彩网址-| www.72vl.com-福彩猫腻-| www.111353.com-小站宝彩票正规吗| www.424443.com-彩票站点怎么开| www.530190.com-彩头是什么意思| www.602588.com-求信誉好的彩票平台| www.667118.com-七乐彩顶测-| www.731372.com-易彩堂网-| www.809640.com-手机购彩合法么| www.874085.com-快三杀号的计算| www.948817.com-好运快三开奖时间| 818合彩www.www.5666hc.com| www.115694.com-天福彩票-| www.261320.com-极速时时彩开奖| www.051091.com-中国第一快三| www.201345.com-河北快三开奖统计表| www.299105.com-今日福彩开奖| www.367632.com-预测彩票中奖号| www.51765.cc-福彩三b开机号| www.8697.top-e乐彩源码-| www.547863.com-彩票推荐api| www.646146.com-职业玩彩票的人| www.732695.com-佰万彩票注册| www.811811.com-新昌双彩乡-| www.888955.cc-凤凰彩票有人玩吗| www.962416.com-二十选五彩票开奖号| www.cai7399.com湖北快三今天| www.254.net-只有3个数的彩票| www.3km.com-彩漂粉有毒吗| www.65hf.com-乐盛彩票-| www.0404.wang-96.cc彩票至尊| www.5681.xyz-日本有什么彩票| www.025743.com-快三怎样才能赚钱| www.302122.com-掌中彩app-| www.ku87.com-人人快三开奖结果| www.040700.com-永利国际买彩票| www.276208.com-七星彩复式投8| www.61044.com-七乐彩幸运选号| www.845621.com-369官方彩票网| www.921755.com-大发快三自动预测| www.982491.com-陕西竞彩图片| www.va50.com-河南体彩手机版| www.955.site-七星彩开奖软件| www.6046.cm-彩票破角可以兑奖吗| www.16081.com-时时彩群规-| www.56961.cc-体育彩票追号| www.403337.com-北京七星彩票| www.89935.cc-足球精彩网站| www.49111.com-秒速时时彩假不假| www.56dd.com-手机彩票刮奖| www.298318.com-内蒙快三最近50期| www.867086.com-体彩第18158期| www.cp3859.com-分分快三骗局| www.83rj.com-惠彩网络科技| www.07770.cc-中彩的那一天课文| 易彩网www.36166l.com| www.716359.com-彩铅画人物古风背影| www.530760.com-买时时彩违法| www.606468.com-竞彩足彩专家推荐号| www.673747.com-彩画的样式有哪些| www.743464.com-彩乐乐百十个位杀码| www.613900.com-平安彩票极速赛车| www.735209.com-彩票冷热原理| www.810628.com-澳客竞彩开奖网站| www.907763.com-网上哪个平台买彩票| 网易彩票www.096wy.com| www.hd13.com-湖南福利彩票25选| www.v03.org-熊猫购彩-| www.65uh.com-沈阳市福彩中心电话| www.77651.cc-彩票电子竖屏走势图| www.028354.com-博友彩正规吗| www.102964.com-大奖彩票软件| www.0310.cc-福利彩票中奖算法| www.536768.com-吉祥彩票05005| www.623935.com-彩6官网下载网址| www.695985.com-福彩体彩走势大全| www.770552.com-豫彩通app官网| www.830276.com-白菜赌博论坛送彩金| www.891736.com-五分彩稳赚公式软件| www.951333.com-全新彩票下载| www.986028.com-3d彩报中心彩报| www.jx5.cc-体育彩票骗局大揭密| www.mt83.com-978彩票-| www.03wq.com-极速赛车彩票怎么玩| www.53be.com-牛票票彩票app| www.865.xyz-福彩最大值振幅走势| www.hw1.com-什么叫彩票屠龙计划| www.955555.com-合肥竞彩销量| 彩吧www.581860.com|