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

知道了
58福彩 www.487744.com-久久彩票平台坑人吗| www.621005.com-彩票实体店怎么开| www.716876.com-麋鹿彩铅画-| www.800489.com-体育彩票3d试机号| www.881611.com-辉煌彩票下载| www.965891.com-最近福彩中奖的彩民| www.cai5504.com福彩甘肃快3走势图| www.tp96.com-彩票代理申请书| www.50ng.com-体彩福彩双色球下载| www.0718.date-网上时时彩买可靠吗| www.312498.com-怎么开彩票网站| www.l60.club-福彩票3d走势图| www.680635.com-澳门彩票slot| www.2255.vip-三笠本子彩图百度云| www.834401.com-日免好彩价格| www.jz96.com-彩票2元专业| www.54yv.com-竟彩足球受注赛程| www.9928.in-彩票驿站主页| www.213033.com-u9手机彩票软件| www.30038.cc-澳客体彩app下载| www.676938.com-彩色的包装袋机器| www.193625.com-吉林快三根号计划| www.410076.com-中体彩运营中心| www.518508.com-美源发彩官网| www.637209.com-彩虹6号在哪里下载| www.736202.com-亿彩聊天室-| www.834586.com-日景彩烟在哪里买| www.920193.com-彩gg网页版-| www.999896.com-福彩类似排列五| www.cr83.cc-广西快三全天多少期| www.77yj.com-足彩是赌博-| www.62rf.com-ai足彩软件-| www.984060.com-福建快三号码统计器| www.5833.top-恒彩注册账号| www.322112.com-快三软件预测| www.16529.cc-五分时时彩是真的吗| www.cp9799.com-快三豹子最大遗漏| www.yk87.com-贵阳福彩官方网| www.73tk.com-玩彩票完死了| www.n58.net-北京快三今天开奖| www.116325.com-彩虹的颜色是哪七种| www.616831.com-体育彩票到期时间| www.738101.com-单双五分快三| www.831556.com-福彩销量大跌| www.369102.com-体彩排三两码遗漏| www.604365.com-688彩票黑-| www.737132.com-中国体彩大乐透安装| www.826752.com-太阳彩票平台| www.913582.com-万彩网是正规网站吗| www.980231.com-cp12彩票com| www.qz50.com-陕西快三是不是假的| www.591428.com-快5彩票合法吗| www.09614.com-105彩票网站登录| www.522460.com-我乐时时彩全天计划| www.702575.com-福利彩票旺旺年| www.820888.com-3d牛彩彩摘网| www.960813.com-709彩票在线| www.cp5669.com-中彩网快三-| www.501820.com-彩票机使用方法| www.681384.com-彩票该不该继续买| www.932352.com-快三网投下载app| www.cf19.cc-江苏快三官方网站| www.6tt.cc-购物送彩票宣传语| www.525236.com-时时彩开奖网易| www.603701.com-梦见自己找彩票店| www.727672.com-福彩中奖号码今日| www.119249.com-分分快三猜一个好| www.7007.in-特彩吧49949| www.30775.com-彩票计划助手| www.96162.cc-福利彩票刮刮乐票种| www.070532.com-结婚彩礼和嫁妆比例| www.186699.com-安徽省快三开奖| www.318461.com-火箭彩票平台| www.89dw.cc-打私彩什么罪| www.635602.com-时时彩最安全平台| www.05gb.com-彩铅涂色握笔| www.301.cc-网上买彩票赔了5万| www.37465.com-旧板彩经网走势图| www.585409.com-阿理彩票是什么网址| www.035.la-中兴彩票官网首页| www.984640.com-彩8提现不了| www.440411.com-老赖中彩票被冻结| www.23416.com-韩国一点五分彩开奖| www.311248.com-最好的彩票人工计划| www.425986.com-下载赢彩资讯| www.526523.com-日本彩票怎么玩法| www.636058.com-彩虹六标准版多少钱| www.717948.com-彩票一组是什么意思| www.802038.com-彩票37期-| www.774699.com-体彩顶呱刮最新票| www.926258.com-一定牛彩票下载官网| 彩宝www.788cb.com| www.615507.com-福利彩票排列3| www.003881.com-做梦梦见买彩票| www.663845.com-河内五分彩开奖直播| www.813576.com-丈夫买足彩赌博欠债| www.086437.com-五福彩676cc| www.112968.com-买彩票中奖的人| www.400263.com-网上玩8彩犯法吗| www.508991.com-试玩彩票平台| www.580054.com-六给彩票香港十二期| www.657541.com-福彩快3倍投计算器| www.54.net-福彩幸运星座规律| www.033988.com-七乐彩网站合法吗| www.871834.com-复式彩票多少钱| www.59339.cc-足彩预测最准的网站| www.165273.com-池州体彩中心电话| www.692968.com-体彩销售机充值| www.832113.com-093彩票好彩客| www.048473.com-赢彩app下载| www.36095.com-苹果彩票pg73| www.029636.com-彩神5号彩-| www.678441.com-百度乐彩彩票网站| www.813608.com-福州彩票店转让信息| www.981643.com-彩民周刊-| www.ao1.cc-一分钟快三开奖结果| www.132084.com-订婚还彩礼-| www.275452.com-彩6彩票app官网| www.547558.com-全国开奖网时时彩| www.635382.com-七彩假期官网| www.720752.com-彩票天天乐-| www.806556.com-大佬彩票登录| www.878482.com-快三注册-| www.936282.com-聚宝盆彩票手机版| www.989823.com-人人中彩票登陆不上| www.8yc.com-彩票在哪里领奖| www.941484.com-彩票代理如何找玩家| 网易彩票www.26163m.com| www.753938.com-购彩之家我的账户| www.856554.com-云发购彩票怎么破解| www.920853.com-7697优乐彩登陆| www.977201.com-彩妆品牌加盟| www.cp9787.com-青海快三开奖详情| www.68971.cc-尊彩网是做什么的| www.220677.com-体彩开奖号码查询| www.289257.com-彩乐专业版可靠吗| www.364418.com-在线购买世界杯彩票| www.60212.com-贵州福彩票开奖结果| www.424212.com-星彩虎论坛-| www.563367.com-7星彩票开奖走势图| 大赢家彩票平台www.763117.com| www.cp176.com-大发彩app-| www.896996.com-36o彩票购彩大厅| www.994851.com-彩票号码组合生成器| www.iq60.com-彩乐乐官网-| www.5ht.cc-怎样科学玩高频彩| www.015366.com-彩票计划群潮信群| www.eh21.com-彩钢围挡图片| www.cp7277.com-吉林省快三赌博案例| www.ll03.com-台北快三开奖| www.798827.com-福彩快3每天几期| www.31530.com-天天竞彩网官网| www.262151.com-快三客下载-| www.7728.vip-彩票中5元在哪领奖| www.3062.pw-四川体彩即开型彩票| www.529889.com-40o500好彩堂| www.77162.cc-中国竞彩足球9场| www.842468.com-彩票是怎么分配的| 500彩票www.51515y.com| www.02gc.com-快三一注中奖赔率| www.44qt.com-每分钟开奖的时时彩| www.163.biz-五洲彩票倒闭| www.141946.com-如何在竞彩猫上推荐| www.166429.com-江西福彩快3|