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.wangaigou.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.770472.com-重庆时时彩| www.123422.cc-彩票大赢家任九场| www.643696.com-2368彩票-| www.q81.com-吉林95诚信快三| www.57kj.com-北海12生肖彩票| www.854933.com-爱彩平台合法吗| www.54066.com-时时彩分成-| www.243733.com-好彩票苹果手机版| www.089711.com-大发快三代打| www.453382.com-熊猫国际彩-| www.610802.com-福彩3b开机号今天| www.686828.com-中彩那天课文理解| www.275757.cc-时时彩高手怎么倍投| www.798662.com-极速时时彩1码计划| www.891489.com-网上彩票平台发计划| www.985838.com-福彩3字迷图迷总汇| www.cc24.cc-快三正规平台有哪些| www.363005.com-彩虹桥电影-| www.471492.com-广东天彩快三正规吗| www.770415.com-彩杠麻将-| www.853411.com-体彩4十1-| www.934787.com-体彩高频机顶盒| www.987987.com-掌中彩是合法的吗| www.pp0.com-福彩快三3开奖规律| www.po49.com-梦想彩票是骗人的| www.281518.com-竞彩体育彩票店提成| www.024523.com-福盈门彩票官方网站| www.567611.com-安康福彩加盟条件| www.96up.com-高频彩背后-| www.684354.com-亚慱彩票网址| www.523419.com-合乐彩票下载| www.cp9687.com-福彩快3彩票真假| www.234665.com-福彩3d开奖号密码| www.4110.com-苏州双色球快三| www.53839.cc-如何举报福彩体彩| 网易彩票www.503433.com| www.380915.com-彩票开奖结果选四| www.568043.com-体彩和福彩怎么买| www.679778.com-重庆福彩手机报网址| www.907763.com-网上哪个平台买彩票| www.1po.com-买彩票疯狂-| www.996342.com-推店竞彩app| www.tf86.com-彩票双胆-| www.917271.com-彩铅画简单图片| www.hx38.com-乐汇彩app-| www.9831.biz-油性彩铅画苹果| www.113304.com-成都快三查询| www.323221.com-2019南洋乐和彩| www.147179.com-彩票定位胆技巧稳赚| www.566346.com-r8国际彩票靠谱吗| www.508522.com-神州彩专业版| www.05041.com-体彩排3和值走势图| www.234068.com-微彩骗局方法| www.8000.cx-博彩感情骗局| www.0jc.com-彩虹的微笑-| www.176037.com-快三怎么倍投最合适| www.sn31.com-彩之家平台可靠吗| www.30uj.com-足彩亚盘走势图表| www.779.date-双色球福彩神牛杀号| www.5163.xyz-35选7彩票-| www.419419.com-港版绿好彩好抽吗| www.56710.com-必赢彩票登录不了| www.75xq.com-福彩的开机号是多少| www.169928.com-吉林新快三开奖号码| www.889138.com-彩店宝ios-| www.992285.com-新疆福彩喜乐彩| www.eg99.com-鬼6神算彩吧图库| www.yb82.com-天津福彩开奖结果| www.21eq.com-网上时时彩犯法吗| www.94ix.com-彩票567-| www.505180.com-彩王之巅的彩票专栏| www.637109.com-彩虹六号透视挂| www.783301.com-三d全彩邪恶漫画| www.972946.com-178彩票网靠谱么| www.kf84.com-网彩导航-| www.5051.vip-彩界精英独胆| www.369059.com-彩8是真的能赚钱吗| www.478942.com-上饶体彩在哪里兑奖| www.554932.com-两元网彩票走势大全| www.108831.com-福彩预测专家最准确| www.313169.com-彩票500官方端口| www.412177.com-青蛙彩票新版跑狗| www.522334.com-福彩群英会开奖号| www.593118.com-彩虹剧组演员表| www.61065.com-三d家彩网开机号| www.025238.com-天津福利彩票| www.328622.com-免费送彩金游戏网址| www.469426.com-美国彩票网上购买| www.570022.com-五分彩全天计划菜鸟| www.662652.com-乐彩cc33com| www.776184.com-利彩一我的帐户| www.947905.com-超级彩票代打兼职| www.cai6789.cc-快三彩票群真的假的| www.3xz.com-普通人彩票知乎| www.wh08.com-甘肃逸彩快三是什么| www.641818.com-福利彩票标志的意义| www.914028.com-网上买彩票快三| www.993381.com-足彩2串1对冲| www.ba77.com-快三最稳投注方案| www.tc69.com-官方彩票有哪几种| www.2666.com-久久彩票合法吗| www.24242.com-宝马平台彩票| www.506026.com-网络赌快三赢钱| www.772335.com-彩票开奖快乐双彩| www.752192.com-app中彩网-| www.896480.com-福彩短信投注真的吗| 全民汇彩票www.52303j.com| www.sc08.com-3d福彩天牛图库| www.1115.in-足彩输-| www.242581.com-166手机彩票| www.555951.com-彩票试玩游戏平台| www.60909.com-涿州体彩中心在哪| www.70021.com-十一运夺金彩乐乐| www.qw20.com-麦久彩票网林三| www.183177.com-网上快三是真的吗| www.268615.com-中国福彩手机app| www.636183.com-彩虹六号季票在哪买| www.2520.vip-快三和尾北京| www.24393.com-彩神争霸大发时时彩| www.26pp.com-彩发发pk10-| www.352085.com-快三买一注多少钱| www.975947.com-林州彩礼一般多少钱| www.dv82.com-彩票端在线-| www.095931.com-3d预测号彩宝贝| www.320258.com-福彩开奖号3d| www.454507.com-买两元彩票中多少钱| www.32re.com-v3彩票app-| www.601299.com-大发快三开奖走势图| www.690737.com-蓝鲸彩票-| www.760339.com-时时彩分析软件排名| www.920135.com-百万彩票是骗局吗| www.976173.com-开封结婚彩礼多少| www.hr1.com-内蒙古11选5彩票| www.8if.cc-足彩最新开奖论坛| www.901.cc-福利彩票3d金码| www.38mb.com-彩礼多少钱-| www.134179.com-19026期体彩| www.558.date-幸运分分彩计划人工| www.891234.cc-幸运时时彩计划网页| www.976876.com-枣庄彩礼-| www.ti1.cc-彩票开奖结果查绚排| www.zh74.com-彩票500官方端口| www.352.host-迷彩虎app游戏| www.2bx.cc-买福利彩票时间表| www.278900.com-丹麦快乐彩走势图| www.382908.com-福彩25万奖的种类| www.541368.com-体彩门店查询| www.629165.com-计算器竞彩-| www.692965.com-彩票电话投注| www.220915.com-蛙牛彩票-| www.299878.com-2345彩票网软件| www.1fd.cc-怎样分析彩票买法| www.50bm.cc-烟台市福利彩票地址| www.111191.com-快乐十分钟彩票软件| www.234082.com-彩票坊骗局揭秘| www.300600.com-彩票彩金-| www.17957.com-竞彩足球比分网直播| www.6304.cc-彩票c515-| www.30368.com-北京28彩票公式| www.186575.com-5分钟一开的彩票| www.2031.cn-中国体彩单式票| www.w75.com-乐彩客app苹果版| www.349834.com-博乐彩票现金官网| www.433130.com-彩票百分之八十中奖|