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.hong39.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.627569.com-彩迅pc-| www.796630.com-众博彩票99zbc| www.900364.com-粤淘彩票主页| www.992866.cc-彩票代购稳赚高收益| www.a61.loan-彩票开奖提前一小时| www.87su.com-黑彩软件app| www.188342.com-淘彩票大发快3开挂| www.98028.cc-时时彩哪个软件靠谱| www.212154.com-在哪里下载快三彩票| www.1665.biz-彩票属于五行属什么| www.07684.com-中国福彩吧-| www.733916.com-风彩万象-| www.856422.com-无锡福利彩票店转让| www.956875.com-欧洲百万彩票官网| www.nk3.com-福彩三d走势带连线| www.130645.com-时时彩后三跨度计划| www.6228.vip-猜福彩2d中奖规则| www.020602.com-网易彩票可以提现吗| www.259957.com-如意彩票-| www.352206.cc-黑彩平台总汇| www.kr20.com-上海体彩官网首页| www.54uw.com-福利彩票兑换规则| www.391198.com-龙胜彩票下载平台| www.188277.com-内蒙古福彩-| www.873195.com-网易彩票官方网站| www.899777.cc-安徽福彩站怎么申请| 500彩票www.547677.com| www.nv56.com-福彩3d五行八卦图| www.753225.com-d9彩票网址-| www.875383.com-神州彩票方下载| www.988294.com-江西七乐彩-| www.mt09.com-公益彩票app下载| www.39xh.com-518彩票诈骗手段| www.2909.vip-福利彩票机-| www.365302.cc-12彩票安卓版| www.1270.vip-彩尊手机客户端下载| www.34904.com-欢乐彩直播间| www.984084.com-鸿运彩票手机网| www.08ev.com-哆咪奖七星彩010| 世彩堂www.5854s.cc| www.672.com-体彩大乐透新玩法| www.5364.net-投诉彩票777网站| www.11193.com-竞彩牛庄-| 华彩网www.hcw332.com| www.cp642.com-昨天快三开奖结果| www.tq67.com-安徽申请福彩| www.193012.com-我想买彩票怎么买| www.870003.com-祝福利彩票快三| www.967514.com-找彩票导师带赚| www.cai5252.com安徽快三基本形态| www.295735.com-辽宁快三走势图查询| www.390697.com-博123彩票靠谱吗| www.508148.com-彩票套票如何打印| www.575930.com-百事可乐彩票网| www.642933.com-彩票有没有假| www.710859.com-新浪篮彩-| www.780398.com-上海彩票选4的玩法| www.872730.com-金拐玩彩专栏| www.029268.com-九州彩票大发快三| www.214468.com-盛兴彩票网手机v1| www.386098.com-6和合开彩结果| www.569899.com-天天中彩票注册3元| www.680169.com-幸运中彩-| www.832219.com-想开彩票站怎么申请| www.961976.com-开彩票店需要多少钱| www.dh16.com-彩票达人是什么意思| www.27nv.com-体彩小熊猫-| www.966217.com-发彩网行不行| 盈彩www.yc7701.com| www.324533.com-365cc彩票网| www.514664.com-国内彩妆品牌大全| www.675608.com-今日体彩中奖号玛| www.828397.com-665彩票网-| 39彩票www.3933v.cc| www.892181.com-武汉高频彩11选5| 亿万彩票www.931499.com| www.55bg.com-腾讯分分彩前三和值| www.2885.biz-彩票网大转盘| www.570928.com-台湾分分彩开奖网| www.cp234.com-全天一分快三计划| www.391.live-美源发彩-| www.684858.com-彩票代投兼职靠谱吗| www.ch26.com-快彩网是真的吗| www.872743.com-腾讯分分彩-| www.814066.com-棋牌彩票类游戏| www.hn04.com-时时乐彩票-| www.40fi.com-中信彩票技巧| www.377741.com-中华彩票网好看视频| www.290269.com-彩库宝典下载下安裝| www.453893.com-多乐快三走势图| www.11238.com-足球购彩平台| www.69752.cc-海南4个号是啥彩票| www.565506.com-王牌彩票网下载| www.678906.cc-彩票双色球小诸葛| www.794818.com-新彩吧图库p3| www.885351.com-神州彩平台-| www.977806.com-中国福利彩票快餐| www.cz04.com-约彩-| www.k59.club-吉林快三黑彩坑人| www.088.space-3d走势图彩宝贝| www.37386.cc-百度懂彩宝-| www.24841.cc-彩铅星空图-| www.93873.com-七乐彩规律-| www.41oo.com-vr3分彩有风险吗| www.891200.com-七星彩基本术语| www.202407.com-贵州省体彩中心地址| www.53302.com-时时彩五星固定五码| www.516342.com-幸运彩票网安全吗| www.17706.com-彩店宝新版-| www.711888.cc-竞彩足球单关盈利| www.832596.com-谁知道76平台彩票| www.933839.com-今日开奖彩票查询| www.356452.com-就餐送彩票违法吗| www.600200.com-买彩票心理-| www.717897.com-彩庫寶典ios| www.808357.com-九场胜负彩专家预测| www.906313.com-有人打快三黑彩| www.999820.com-河北福彩排七开奖| www.nm82.com-时时彩机器-| www.193781.com-吉林省福彩中心电话| www.290597.com-澳门快三官方网站| www.373642.com-大大星彩票走势图| www.512759.com-水彩画凤凰-| www.596797.com-今日头彩开奖软件| www.366009.com-画彩铅花-| www.615097.com-三彩玉是真玉吗| www.85331.com-正规彩-| www.896622.com-足球博彩技巧一招鲜| www.637711.com-彩六加速器哪个好用| www.5814.org-亚彩会注册链接| www.32251.cc-彩票五等奖-| www.266895.com-中华彩票网登录网址| www.621549.com-福利彩票领奖视频| www.441452.com-人人中彩票平台| www.739839.com-中国福利彩票助手| www.736652.com-多彩贵州公众网| www.27799.cc-1688彩吧论坛| www.621035.com-极速三分彩-| www.668885.com-六彩宝典-| www.746768.com-买彩是什么意思| www.816208.com-时时彩顺子最大遗漏| www.877755.com-买竞彩输钱-| www.964964.com-彩票追加-| www.305017.com-新编彩票投注技巧| www.57853.com-破解彩票漏洞软件| www.381724.com-2019体彩点转让| www.504005.com-彩排的彩意思| www.565846.com-12.cc彩票-| www.623830.com-雅迪米彩二代| www.675487.com-网上彩票app靠谱| www.730538.com-舟山快2彩票| www.5717.xyz-体彩七位数什么选| www.017777.com-福彩36选7走势图| www.122878.com-8k彩票合法吗| www.590501.com-如何预测彩票| www.209233.com-爱乐彩贵州11选五| www.861310.com-彩报3d图库老虎图| www.924122.com-哪些彩票注册送彩| www.974743.com-快三翻倍投注计划| 亿万彩票www.890992.com| www.553323.com-手机足彩怎么买| www.34823.com-举报网络购彩平台| www.mf17.com-鸿运彩app下载| www.19222.cc-体育彩票在哪兑奖|