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

知道了
彩01彩票 www.032318.com-福彩三的图库| www.255548.cc-体彩排列五玩法介绍| www.710768.com-彩金单教程-| www.810927.com-足彩18175-| www.956966.com-hk百彩网开奖日期| www.bs46.com-彩票快3辅助软件| www.750872.com-老卓易彩票-| www.852045.com-首选500体彩网| www.29za.com-今天福彩什么好| www.816991.com-彩票星期四开奖结果| www.852045.com-首选500体彩网| www.330190.com-福彩论坛一东湖社区| www.210559.com-福建快三号码推荐| www.207129.com-至尊快三-| www.291941.com-福彩双色球开奖| www.368769.com-快三追号是什么意思| www.465163.com-从赔率看足彩冷门| www.551319.com-4场进球彩开奖结果| www.64zj.com-新澳洲3分彩计划| www.2021.date-中彩网怎样买彩票| www.al98.com-快三开奖记录查询| www.062840.com-网上买彩票能报警吗| www.673021.com-分分彩倍投-| www.790513.com-福彩双色球选号神器| www.wb64.com-新彩吧网站-| www.67rw.com-彩票站中奖去哪领| www.7945.cm-彩墨层析怎么做| www.918099.com-223彩票app-| www.37908.com-河南彩票游泳夺金| www.58237.cc-彩乐园怎么下载| www.88472.com-网络彩票推广合法吗| www.154456.com-彩票下载下-| www.32856.cc-汇彩娱乐-| www.060785.com-附近济南体彩店| www.139173.com-华盈彩票-| www.222771.com-江苏快三计划全天| www.976540.com-河南彩票报纸| www.qy7.com-新2彩彩票论坛| www.265373.com-福彩3d惊天秘密| www.267604.com-竞彩怎么判断冷门| www.654070.com-重庆时时彩直选遗漏| 大赢家彩票平台www.918375.com| www.528321.com-揭秘时时彩平台骗局| www.388643.com-小米彩票不能追号了| www.on62.com-七乐彩奖励-| www.1202.vip-买彩票亏了可以退吗| www.53or.com-红橘微彩娱乐| www.077806.com-七星彩奖表图下载| www.801929.com-抓彩票怎么能中奖| www.898359.com-时彩经验-| www.971329.com-3d彩迷天地联销图| 亿万彩票www.890995.com| www.85855.com-彩力板-| www.445953.com-易彩可以提现吗| www.ly43.com-幸运中彩票快3| www.99348.com-时时彩极速规律| www.105111.cc-体育彩票用什么软件| www.783.tv-彩神网是正规的吗| www.8708.cc-2016足彩app| www.903611.com-购彩通苹果系统| www.287823.com-快3彩票单-| www.404458.com-结婚彩礼多少合适| www.513108.com-九龙彩权威料| www.657795.com-百宝世嘉彩票怎么玩| www.762250.com-重庆时时彩v| www.847481.com-福彩3d计划网站| www.202268.com-贵州中彩票-| www.315938.com-上海体彩兑奖| www.127929.com-与彩虹有关的歌词| www.512386.com-八手巴购彩票邀请码| www.669166.com-外国买彩票最牛的人| www.817997.com-九号彩票骗局揭秘| www.962438.com-贵州体彩超级大乐透| 大赢家彩票网www.910155.com| www.32799.cc-福彩3d天宇和值迷| www.86752.cc-时彩害人-| www.274077.com-时时彩宝典老版| www.399365.cc-七星彩第19034| www.522628.com-彩票龙虎和技巧| www.824776.com-周口市福彩中心地址| www.cai105.cc-快三平台下载| www.68225.com-福彩算法-| www.038844.com-二分快三开奖| www.lu26.com-彩票有一分快三吗| www.303119.com-苏州快三是正规的吗| www.804898.com-彩色母料厂-| www.88302.com-彩票系统带自动追号| www.077789.com-旺彩平台11选5| www.187359.com-时时彩0369规律| www.812087.com-3d字谜双彩论| www.887937.com-博彩推广要加什么群| www.961442.com-富鱼网彩票-| 8816彩票www.8816r.com| www.47ro.com-盛彩科技兼职骗局| www.1280.me-中信彩票是骗钱的吗| www.27694.com-东彩娱乐是坑人的| www.66906.com-福彩3d今天奖号1| www.69762.com-辽宁彩票11选5| www.1nw.com-彩票号码怎么对| www.185845.com-玩快三的人多吗| www.308163.com-76858彩票-| www.120237.com-彩票店有大发快三吗| www.251702.com-哪些彩票是合法的| www.18875.cc-彩票336官网| www.027360.com-一分彩票-| www.163031.com-下载江苏快三走势| www.157611.com-竞彩足球猜比分技巧| www.254325.com-凤凰网投时时彩| www.332703.com-美国彩票大奖号码| www.423163.com-体彩图标logo| www.528472.com-微彩点播苹果版| www.723.win-19028期胜负彩| www.189961.com-湖北福彩开奖公告| www.276599.com-彩票最多反水多少| www.126140.com-快捷彩票安全吗| www.136964.com-附近福利彩票站多远| www.731844.com-彩色包装厂-| www.844859.com-体彩宣传图片大全| www.980530.com-福彩3d北盟天机图| www.hb9.cc-安徽快三遗漏走势图| www.28165.com-168彩票能玩不| www.76977.com-天玺彩票是什么| www.90xj.com-彩13网站安全吗| www.716003.com-彩乐乐3d-| www.630956.com-爱趣彩app-| www.781014.com-长春彩票销售员招聘| www.065888.cc-最安全福彩3d投注| www.516861.com-色彩知识基础知识| www.603320.com-世界杯彩票买哪些| www.355504.com-福彩专家杀码定胆| www.101603.com-中原彩票用户注册| www.iw42.com-皇都彩票app入口| www.566963.com-美国兆彩怎么买| www.254728.com-彩之家网站-| www.226999.com-快三输钱怎么回本| www.177744.com-彩票开挂软件靠谱吗| www.341354.com-怎样拉人玩彩票| www.892711.com-01彩票网-| www.yr71.com-有没有澳门福彩快三| www.248577.com-购彩网下载官方| www.331940.com-爱彩乐11选5遗漏| www.cai8869.com彩票开福彩奖结果查| www.576248.com-青蛙彩票导航网88| www.oh86.com-福彩开奖查询询| www.812339.com-体育彩票排列五字谜| www.940533.com-vr重庆时时彩官方| www.982599.com-苹果彩16怎么下载| www.iz7.cc-快三有什么规律吗| www.01ex.com-湖南快三形态走势图| www.667593.com-七色彩球小游戏| www.533816.com-7星彩连中2个号| www.090891.com-广西快乐双彩结果| www.08163.com-体彩排三排五论坛| www.653005.com-8炫彩彩票玩法| 体彩天下www.tctx6.com| www.265323.com-中国福彩开奖规则| www.j86.net-美国彩票十大巨奖图| www.750820.com-香港百彩网开奖结果| www.850655.com-梦见自己彩票中奖| www.920502.com-彩票查询软件下载| www.975284.com-彩票奖号-| 361彩票www.361944.com| www.488300.com-足彩稳赚不赔攻略| www.566060.com-火星彩票软件|