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.biranbalmer.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.1948.vip-福彩杀码定胆方法| www.1571.wang-彩票开奖时-| www.32329.com-大乐透爱彩人走势图| www.088515.com-信阳千万彩票无人领| www.355014.com-买那种彩票容易中奖| www.95951.com-彩票大贪-| www.359.live-彩票奖池-| www.81766.com-彩票中大奖征兆| www.299028.com-中福彩票登录| www.406931.com-彩吧三毛3d图库| www.549657.com-足彩胜负彩如何购买| www.665740.com-博百万彩票网| www.755210.com-大豪门彩票-| www.841599.com-内蒙古11选彩票网| www.923061.com-108彩票下载安装| www.987813.com-时时中彩网-| www.435883.com-腾讯天天彩票被约谈| www.564833.com-体彩天下软件下载| www.663233.com-广西双彩开奖结果| www.753098.com-甘肃体育彩11选五| www.837920.com-体彩字谜牛材网| www.918727.com-乐玩彩票-| www.983774.com-开心七星彩论坛| www.62006.com-凤凰娱乐购彩| www.737120.com-众彩网筱杉最新预测| www.850111.cc-分分彩有假的| www.950813.com-腾讯5分彩计划软件| www.cai027.com-快三走势图今天江苏| www.657174.com-360彩票登录| www.746224.com-海南七星彩高手论坛| www.842168.com-体育彩票基金用途| www.908970.com-3d福彩选号技巧| www.974830.com-体彩官方网站电脑版| www.ep3.cc-快三复式买四码| www.qh65.com-好彩一今天开奖结果| www.5tl.com-体彩足球中奖上税| www.64wy.com-分分彩五星计划网站| www.101990.com-乐乐彩是什么意思| www.877262.com-体彩排列32019| www.pj88.cc-足球彩票对阵表| www.xl5.com-1分快三骗局| www.03re.com-快三越赌越输| www.16553.cc-七乐彩9个号多少钱| www.019531.com-福彩3d神六鬼算| www.193654.com-福利彩票技-| www.396461.com-双层彩虹-| www.397827.com-高手网竞彩网猛料| www.567855.com-吉林快三计划网站| www.774886.com-彩神腾讯分分彩计划| www.22219.com-特彩吧免费资料大全| www.019532.com-wap中彩网-| www.223518.com-内蒙古福利彩票网站| www.75386.cc-风云彩票a-| www.580508.com-疯狂赛车彩票计划| www.266940.com-快三最新邀请码| www.508369.com-彩票怎么捡漏| www.604817.com-彩猫彩票是黑平台吗| www.679296.com-老公买彩票-| www.022445.com-淘宝快三数据| www.954316.com-重庆时时彩软件| 六福彩票www.66ffz.com| www.86ny.com-双色球乐彩彩园下载| www.6699.name-彩票应用哪个好| www.562868.com-爱米彩票app网址| www.657876.com-百宝彩票双色球| www.741007.com-澳门彩票是什么玩法| www.813915.com-内蒙古福彩一定牛| www.877469.com-快一分彩票app| www.982829.com-蓟彩芝演过的电视剧| www.kj3.com-安徽快三豹子遗漏| www.pp37.cc-今天湖北快三走势图| www.128419.com-利盈彩票999| www.221796.com-快三彩票挂机| www.227998.com-彩票开奖大乐透玩法| www.606586.com-网上的彩票-| www.321478.com-福彩门戶-| www.020855.com-今晚彩票开机号| www.181798.com-河北福彩-| www.350835.com-彩贝壳拼团怎么退团| www.506250.com-大发分分快三| www.424216.com-福彩3d有多长时间| www.072.com-利彩你资源站| www.4675.vip-两块钱的是什么彩票| www.05505.cc-天天快三彩票网51| www.373332.com-好几个699彩票| www.10ew.com-酷彩海鲜锅多大合适| www.147.cm-美丽漂亮的彩虹图片| www.7090.xyz-七彩蓝田分红| www.696221.com-足彩365网-| www.799456.com-亿彩购物中心| www.870952.com-刚力彩芽丑闻| www.978234.com-成都彩钢夹芯板厂区| www.qo8.cc-快频彩票官网| www.655030.com-网投时时彩网站| www.pd85.com-燕赵福彩-| www.44pa.com-红树林彩票网址| www.2502.vip-亚博中标体彩项目| www.c49.in-306官方彩票苹果| www.24mx.com-爱乐彩河北快3| www.582576.com-锋彩直播破解4.4| www.658438.com-数字三彩神通手机版| www.730949.com-福彩快乐十二玩法| www.563909.com-稳赚体彩竞猜平台| www.840251.com-上海基诺型彩票| www.893055.com-福利彩票3d开奖号| www.970230.com-彩神通彩票预测软件| www.ns81.com-福彩3d输几十万| www.w83.tv-今天体彩试机号| www.042016.com-江南彩姐大乐透预测| www.597068.com-彩久彩票-| www.721786.com-刮彩票的技巧| www.813072.com-网上博彩诈骗| www.899761.com-下载彩app-| www.964795.com-时时彩技巧电子书| www.cp3344.cc-官方一分快三| www.173921.com-彩神ix-| www.387654.cc-体彩排列3预测定胆| www.sv08.com-高手彩坛资料大全| www.012527.com-海南体彩开奖结果| www.17345.com-雪象园足彩比分直播| www.81867.cc-时时彩彩票心得| www.079240.com-全民彩票软件靠谱吗| www.158742.com-黑龙江体彩开奖查询| www.232323.cc-黑彩票怎么赚钱| www.951090.com-我中啦彩票网| 火星彩票www.hx6691.com| www.lw82.com-爱乐彩天津十一选五| www.5321.org-分分彩怎么杀号稳定| www.703411.com-台湾五分彩是骗局吗| www.631036.com-欧盟好彩柠檬双爆| www.719583.com-3d彩涂报纸-| www.785745.com-领航彩票计划| www.852295.com-山西省福利彩票中心| www.904733.com-澳客足球彩票网| www.960268.com-风之彩挣钱是真的吗| 818合彩www.07hc.com| www.1866.vip-q彩注册邀请码| www.003514.com-盈彩快3-| www.921374.com-幸运快三豹子计划| www.991178.com-可乐彩票官网| www.df71.com-万博彩票彩种| www.tr92.com-28彩票app-| www.16vh.com-明彩王牌官方网站| www.247605.com-快三守号翻倍公式| www.x66.cc-下载彩票网站| www.708388.com-彩票公式的视频| www.779479.com-竞彩预测网易| www.844367.com-微山南阳彩礼多少钱| www.903422.com-万豪彩票助手旧版| www.019355.com-双色球中奖彩票真图| www.95zs.com-搜狐彩票图表数据| www.5642.org-双胜彩什么意思| www.00993.com-福彩3d出什么号码| www.46020.com-福彩3d谜底图| www.93334.cc-q彩网怎么登录不了| www.531236.com-技术型彩民中奖技巧| www.603206.com-福建彩民31先7| www.65rn.com-容声彩票-| www.6323.com-搜狐福彩体彩开奖| www.28046.com-1688彩票网址| www.611001.com-福彩3b开奖号| www.115327.com-11086移动彩| www.055141.com-彩色的鸟-| www.9032.biz-彩票源程序-|