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.xuehaojie.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.765124.com-快彩票下载-| www.0356.pro-时时彩跨度的用法| www.501.space-秒速赛车彩票| www.711710.com-时时彩5星直选技巧| www.92166.cc-88688彩票-| www.122561.com-彩世界官网软件下载| www.95kh.com-体育快开彩票中奖| www.931398.com-山东扑克牌快三| www.791966.com-注册成功彩票| 新盈彩www.xinyc3.com| www.97951.com-彩票兑奖时间期限| www.102847.com-时彩平台-| www.2714.wang-彩票秘籍是真的吗| www.07376.com-玩高频彩心态| www.883772.com-博彩王彩票分析| www.963067.com-三d彩神通预测| www.pp32.com-福彩3d新浪直播| www.27ge.com-查看支付宝彩票中奖| www.rw76.com-优信彩票大厅| www.133740.com-彩票图吧三d| www.160440.com-七星彩解诗网粤| www.i75.cn-乐彩论坛下载安装| www.53li.com-一张体育彩票多少钱| www.1616.live-彩41app-| www.041111.cc-手机彩票挂机平台| www.75nv.com-xy幸运彩票网站| www.456.gg-因为穷所以买彩票| www.965549.com-北京福彩快三中奖号| www.909450.com-河北福彩快三彩经网| www.hm.cc-中国福彩快三大小| www.973934.com-七天彩票官方网站| www.1029.net-速彩网真的假的| www.864708.com-235彩票官网下载| www.443663.com-时时彩组六平刷技巧| www.954014.com-网上买体育彩票软件| www.uc9.cc-福彩开奖号-| www.uq83.com-鸿彩投注下载| www.075631.com-瑞彩网是真的吗| www.077478.com-旺旺彩票是真是假| www.311209.com-神圣彩票是什么| www.092089.com-500百姓彩票| www.871010.com-星彩3d胆码-| www.948232.com-新粤彩网-| 惠民彩票www.hm6788.com| www.111428.com-彩宝彩票是真是假| www.234048.com-一分彩害人-| www.935682.com-时时彩定胆稳赢方法| 万彩网www.wcp666888.com| www.dm36.com-快三哪个平台最大| www.301140.com-彩鸿彩票不能提现| www.314433.com-舟山飞鱼彩票走势图| www.396665.com-体彩181-| www.559203.com-福利彩票号码有几种| www.636296.com-中堂彩马会43| www.596235.com-云彩彩票网-| www.678399.com-明天快三开奖结果| www.759512.com-重庆时时彩视频开奖| www.825818.com-3d彩图总会-| www.886566.com-福彩三d字谜叟| www.950563.com-福彩3d杀跨-| www.995904.com-竞彩加奖是怎么回事| www.df98.com-快三的玩法-| www.6957.me-竞彩收米图-| www.05zm.com-水彩颜料樱花| www.426814.com-福彩三d三毛图库大| www.711383.com-我要天天福彩| www.792771.com-彩票中奖上那领奖| www.897051.com-彩票网站168| www.996520.com-龙江体彩网-| www.qf37.com-8亿彩下载-| www.150161.com-中彩堂软件-| www.917058.com-彩铅画图片卡通可爱| www.p39.net-网购彩票顺口溜| www.568125.com-怎样玩彩票赚钱| www.953352.com-江苏快三单双计划网| www.yz93.com-昆明快三-| www.3298.net-广西快三冷热| www.59kn.com-海南七星彩梦册查奖| www.91229.cc-开幕式彩烟贵吗| www.82823.com-彩乐汇下载-| www.321384.com-极速快三怎样稳赚| www.560942.cc-安徽快三和值图表| www.753101.com-吉祥8彩票平台| www.906614.com-我要买彩票双色球| www.ci30.com-一分彩是不是真的| www.180108.com-今日河北快三走势图| www.369443.com-福利彩票双色球| www.622602.com-福彩彩票软件下载| www.885388.com-大乐透购彩-| www.02012.com-彩票上瘾-| www.85112.com-彩乐乐3d推荐号| www.076933.com-app彩票大全| www.145568.com-蓝球竞彩专家预测| www.373952.com-福彩78期开奖号| www.473732.com-中了彩票的那些人| www.557503.com-好运来高手彩坛| www.623661.com-亿盈彩票_购彩平台| www.699163.com-华夏彩网-| www.777276.com-锋彩直播老版本下载| www.991518.com-网投彩票app| www.79575.com-天下彩免资料| www.044054.com-仁信彩票是真的吗| www.933379.com-500彩app-| www.449987.com-买彩票应该多久开奖| www.8995.top-新加坡30秒彩骗局| www.882597.com-中国高频彩合法吗| www.ri37.com-极速快三微信群| www.06xd.com-用彩铅画彼岸花开| www.575110.com-彩票王彩票顶呱呱| www.974592.com-众彩软件下载| www.p92.xyz-易发彩-| www.522692.com-天下赢彩票与你同行| www.cv44.com-下载彩计划app| www.0273.xyz-梦见中彩票遭追杀| www.24427.com-体彩天下网站| www.540940.com-香港快三是福彩的吗| www.523415.com-合乐彩票-| www.650738.com-手机游戏免费送彩金| www.746695.com-酷彩吧正规吗| www.821474.com-体彩今日舟东全图| www.880332.com-内蒙福彩快三和尾| www.938055.com-福彩好运十倍黑幕| www.981074.com-七彩杯报名-| www.ss.cc-北京快三专家预测| www.mb04.com-彩之源骗局彩票| www.1666.site-中彩网天空彩| www.895532.com-有人介绍网投彩票| www.269627.com-欧洲彩票巨奖| www.495618.com-抠门博彩-| 3158彩票www.cp3158.cc| www.03ic.com-彩票冷热号怎么看| www.2425.me-彩票软件违法| www.9888.hk-2019竞彩新规定| www.108305.com-玩彩票心理-| www.087372.com-90彩票邀请码| www.wy3.cc-3d彩吧论坛-| www.950333.com-红旗彩票三站下载| www.cx93.com-摇彩票-| www.r68.net-彩票总是输-| www.4436.vip-众亿彩票app| www.67266.com-彩票九怎么骗| www.8927.loan-2356彩票app| www.9753.xyz-足彩预测app| www.712590.com-中国福彩时时彩开奖| www.805759.com-彩票是属于哪种行业| www.864918.com-人人中彩票网合法吗| www.913238.com-浙讧体彩6十1开奖| www.963446.com-新婚姻法彩礼新规定| 彩世界www.99788o.com| www.cl27.com-彩票平台网址| www.pb33.com-体彩排列三选号技巧| www.f86.club-彩票吧吧-| www.15wl.com-周口体彩-| www.03le.com-足彩投资宝典电子书| www.9009.org-国乐彩彩票-| www.945557.com-河南农村彩礼多少钱| www.cp2811.com-五分彩都是骗局吗| www.zr72.com-七彩网真的能赚钱吗| www.576148.com-体彩6码最大遗漏| www.221811.com-快3彩票开挂软件| www.899046.com-河南体彩481开奖| www.963034.com-用彩铅画樱花树| 大赢家彩票网www.83033g.com| www.935586.com-百赢快三是真的吗|