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.sungloryparts.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.32008.com-体彩佣金转额度| www.789178.com-足球竞彩单关技巧| www.897888.cc-彩票店标语-| www.999578.com-170彩票网手机版| www.fl60.com-足球胜负彩500| 创富彩票www.cf9909.com| www.801240.com-网易彩票走势图分析| www.553353.com-竞彩半全场玩法| www.658178.com-彩票投注站用电视| www.783584.com-彩吧vip官方| www.874463.com-新浪分分彩计划| www.948011.com-双色球中彩网一擂台| www.999612.com-爱乐彩11选五5| www.gh27.com-正规快三彩票| www.43ir.com-北京招聘竞彩分析师| www.305852.com-打彩票没有钱| www.90pl.com-网络售彩坐牢吗| www.9739.biz-默彩七星彩-| www.6759.xyz-红彩会彩票-| www.22823.cc-138彩票-| www.834570.com-彩烟哪里有卖的| www.936825.com-霓虹溢彩-| 名门彩www.33997n.com| www.fq69.com-竞彩比分360| www.yd06.com-派彩每日推荐双色球| www.31sq.com-彩票星期天几点开奖| www.1101.live-上海体育彩票| www.06421.com-彩票庄家平台| www.77537.cc-k彩手机版注册账号| www.6091.biz-在国外中了彩票| www.74306.com-彩虹国旗-| www.767000.com-k彩游戏app-| www.950854.com-大发时时彩破解软件| 爱彩www.235953.com| www.ue57.com-苹果彩票pg59| www.316882.com-中国福利彩票标志| www.395339.com-彩虹岛2官网| www.669430.com-彩票什么时候实名制| www.791634.com-彩票支票多久到账| www.896536.com-华夏竞彩app| www.px46.com-lg彩票-| www.62if.com-贵州福彩快3技巧| www.80200.com-体彩大乐透选号方法| www.287308.com-安徽福彩快三奖金| www.456953.com-彩71下载app| www.682671.com-彩报中心3d图库| www.809083.com-105彩票合法吗| www.919600.com-彩票app软件开发| 91彩票www.9155f.cc| www.027069.com-彩票计划师怎么挣钱| www.39626.cc-农行掌上银行买彩票| www.062379.com-彩乐园2下载安装| 博亿彩票www.626by.com| www.948194.com-天下彩开奖结果| www.250250.cc-爱彩app下载| www.060175.com-中乐彩怎么登录官网| www.92131.com-利彩工具手机版下载| www.200277.com-体彩开奖信息| www.434698.com-39彩票app下载| www.531229.com-9彩彩票正规吗| www.771884.com-福利彩票排列5开奖| www.942248.com-彩27app-| www.lm1.com-彩票app排行榜| www.we15.com-贵州体育彩票快三| www.720.la-竞彩足球最稳推荐| www.8666.top-首页网青蛙彩票| www.84755.cc-十分彩首页-| www.110265.com-七星彩49组包码| www.46gd.com-易旺彩票可靠吗| www.8398.pw-福彩3d和值形态| www.69592.com-lcz99购乐彩| www.044427.com-王牌彩票是真的吗| www.123129.com-福彩3d那些书| www.212951.com-苹果手机彩票软件| www.901066.com-河北福彩排列五开奖| www.979006.com-淘彩票下载-| www.cd85.com-快三有人买过吗| www.a42.org-彩九官方网站| www.kz51.com-彩票app开发制作| www.85rs.com-e乐彩票app-| www.5770.biz-拾彩贝简谱-| www.150917.com-彩票兼职投注给账号| www.101745.com-红彩直播-| www.181656.com-北京快三预测推荐表| www.249828.com-棒棒彩票app| www.316448.com-彩22app下载| www.379228.com-乐彩双色球论坛静| www.478566.com-女子中竞彩大奖| www.558343.com-天天爱彩票交流群| www.625410.com-七乐彩冷胆四射预测| www.703337.cc-彩票33网页登录| www.726332.com-怎么用话费买彩票| www.797912.com-彩61平台登录| www.870643.com-易旺彩票网下载| www.85282.com-彩票中奖万能码| www.878287.com-手机彩票500网| www.984767.com-青海福彩管理中心| www.c31.loan-亿彩票合法吗| www.264.cm-彩钢门厂家-| www.4105.xyz-彩虹干什么-| www.9070.org-七乐彩行运天下| www.43318.com-福彩三定死规律| www.057186.com-安徽福利彩票网| www.415388.com-重庆时时采彩投注| www.547889.com-买彩票什么网站好| www.652345.com-福彩年后开奖日期| www.716678.com-彩铅画鲸鱼和小女孩| www.777828.com-玩快三心得-| www.76227.cc-温州体育彩票店转让| www.035738.com-七星彩梦册大全| www.776946.com-下载e球彩-| www.646654.com-职业买彩票的有吗| www.310052.com-延吉市招聘彩票| www.421800.cc-d大通彩票网| www.52685.cc-好彩店足彩-| www.769400.com-江苏彩票快三好彩| www.482789.com-福彩3d一定牛首页| www.604144.com-688彩票例行审核| www.717856.com-第17004期体彩| www.839035.com-时时彩有规律么| www.978328.com-市政彩钢围挡价格| 500彩票www.769588.com| www.ko29.com-3b走势彩宝-| www.o65.com-员工年会彩票中奖| www.49bj.com-幸运十分彩走势| www.1261.xyz-彩票快乐三-| www.7616.cm-1216彩票app| www.19193.com-福彩3d天牛图库| www.261720.com-河南省福彩中心地址| www.293733.com-赛车彩票骗局| www.489508.com-搜索彩吧3d-| www.720873.com-彩票数字之间的规律| www.ku6.com-怎样玩分分快三赢钱| www.zu27.com-分分彩选号工具| www.79zf.com-三d牛彩网字谜九| www.058092.com-彩届-| www.148133.com-彩票往期查询| www.134841.com-收贵州快三查询| www.577999.cc-917彩票网-| www.662337.com-彩三b字谜大全| www.hj63.com-中彩网软件-| www.09lc.com-958彩票-| www.712.cm-时时彩长期盈利技术| www.7432.pw-上海体彩站转让信息| www.91568.com-lucky绿好彩| www.097299.com-t体彩排列三| www.245898.com-大发快三彩票首页| www.460083.com-扑克彩票机的漏洞| www.554682.com-彩票的中奖概率| www.609378.com-时时彩地方彩种| www.669228.com-体彩排列三谜语总汇| www.736136.com-福彩怎么卖-| www.796045.com-手机彩膜多少钱一张| www.880502.com-75彩票app-| www.954921.com-黑客能破解彩票吗| www.998672.com-外围竞彩app| www.ak4.com-彩票专家免费预测| www.mr44.com-河北省体彩兑奖地址| www.h31.org-七星彩开奖领奖时间| www.22me.com-快三技巧选号| www.80ic.com-好运彩票能信吗| www.960579.com-注册送彩的彩票| 彩客网www.303717.com| www.pb74.com-福彩视频彩票怎么玩|