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.jendelamedia.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.3487.xyz-代购美国彩票| www.873514.com-易购彩票靠谱吗| www.969008.com-彩票公益金分配| www.nt.cc-中彩娱乐注册| www.854494.com-江苏快三怎么破解| www.4545.net-网络彩票报警| www.49500.com-福建省福利彩票兑奖| www.037705.com-爱投彩票是什么东西| www.150959.com-福体彩最新开奖大厅| www.252653.com-湖北快三带线走势图| www.72345.cc-江苏福彩试机号| www.057389.com-安徽快三综合走势| www.700070.com-福彩中奖兑奖规则| www.831878.com-体彩排列跨度振幅| www.983864.com-七星彩加急版或早版| www.eu28.com-彩票助赢软件计划| www.63tz.com-体育彩票3d开奖| www.1662.in-彩票预测大师必中| www.293832.com-马耳他彩票官网| www.756260.com-qq分分彩免费计划| www.875907.com-体彩走势图综合版| www.44bx.com-出彩的文章-| www.3344.live-好彩票平台官网| www.29937.com-彩经网平台下载| www.u71.top-手机彩票助手计划| www.457.bid-3d杀号安全购彩| www.147022.com-飞腾彩票全天计划| www.235456.com-极速快三计划表| www.343563.com-合法彩票软件| www.802248.com-长春市彩票站出兑| www.941107.com-北京彩票旗舰网论坛| www.zf.com-大发快三账号注册| www.33010.com-彩票被洗衣机洗烂了| www.779447.com-福彩三地跨度| www.318641.com-外国人跳快三| www.078968.com-七星彩抓规公式| www.76js.com-七乐彩开机号多少| www.23273.cc-彩神x是-| www.72318.com-体育彩票走式图| www.022084.com-每分钟一开奖的彩票| www.664384.com-七星彩交流规律图| www.796184.com-各大彩票一等奖概率| www.931355.com-大吉彩票网怎么样| www.cp261.com-广西快三开奖助手| www.zj17.com-3d福彩走势图预测| www.81us.com-新浪彩通电话| www.671677.com-港彩开奖资料大全| www.784233.com-众彩物流批发市场| www.30645.com-下期彩票开奖日期| www.9335.biz-电脑澳门彩球24码| www.72407.com-彩票导航-| www.038053.com-爱购彩旧版本| www.657479.com-亿彩网安卓版下载| www.786179.com-三彩网店代理| www.900629.com-三毛第二版彩吧图库| www.987223.com-163彩票正规吗| www.jz33.com-彩票2元下载软件| www.12lw.com-新浪爱彩足球胜负彩| www.108107.com-推荐彩票计划app| www.3112.xyz-福彩最大值振幅| www.166178.com-内蒙快三-| www.dy08.cc-吉林市快三盘| www.00231.com-彩娃彩票客服电话| www.62is.com-福彩3b天中图库| www.225456.com-3d彩民群微信群号| www.mf7.com-甘肃快三今日遗漏| www.18qt.com-足彩19007-| www.30ca.com-天津时时彩正规吗| www.1368.in-南京福彩网-| www.43275.com-亚洲杯足彩分析| www.619421.com-彩票破了能兑奖吗| www.723278.com-常州4元彩票中千万| www.814016.com-时时彩玩法介绍| www.886850.com-彩61靠谱吗-| www.960941.com-腾讯分分彩预测工具| 500彩票www.549577.com| www.070.me-极速时时彩规律| www.3534.biz-彩金资料大全| www.pb77.com-今日体彩排三中奖号| www.319771.com-易彩彩民注册| www.458201.com-福彩天外飞仙3d| www.dt27.com-74彩票-| www.21ke.cc-彩票数据爬取| www.770.com-双色球彩票预测专家| www.901885.com-福利彩票五分钟快开| 彩客网www.969949.com| www.424448.com-青岛七彩虹显卡| www.550781.com-全民中彩票合法吗| www.00885.cc-乐彩专家论坛下载| www.8697.cn-博彩源码转让| www.06197.com-福利彩票天天中奖| www.87895.cc-吉利三分彩正规吗| www.69088.com-澳客竞彩足球电脑版| www.587975.com-a3彩色复印机报价| www.770238.com-玩彩被黑了怎么办| 500彩票www.3126b.com| www.261302.com-凤凰v彩票免费计划| www.356297.com-彩票全能计划王| www.456379.com-买七乐彩官网| www.960434.com-足球竞彩宝app| 中彩网www.81233z.com| www.18ej.com-江苏福彩唯一官网| www.072605.com-福利彩票摇骰子| www.801526.com-966购彩网-| www.2584.win-用数学算法买彩票| www.9443.org-二分彩怎么玩| www.58812.cc-彩票679软件| www.747430.com-购彩网gcw-| www.948806.com-双色球预测大师旺彩| 网易彩票www.560926.com| www.971546.com-竟彩开奖查询结果| www.cp6896.com-河南福彩快三走势| www.ru22.com-破解版彩票-| www.496697.com-福彩3d校长原创| www.026219.com-百姓彩坛-| www.135853.com-买彩票经验教训| www.250307.com-甘肃快三中奖金额| www.426642.com-体彩排列三杀码大全| 818合彩www.www.9889hc.com| www.846496.com-彩票如果中大奖| www.968972.com-最近彩票诈骗案例| www.774662.com-七乐彩5拖7多少钱| www.808275.com-安徵快三夸度走势图| www.ra02.com-淘宝如何买彩票| www.721.biz-彩合网app-| www.438342.com-彩票计划聊直播| www.563238.com-881799彩票网| www.645837.com-财神分分彩毒胆算法| www.652004.com-巨弘国际彩票靠谱吗| www.92151.com-迪士尼彩乐园| www.308860.com-网购彩票被骗| www.479304.com-彩99彩票app| www.692630.com-6678彩票app| www.851199.cc-福彩定胆的方法| www.77675.com-彩尊平台怎么样| www.271911.com-中原彩票平台| www.0404.net-360彩票竞猜| www.032856.com-彩票中心邀请码| www.060093.com-瑞彩网彩票可靠吗| www.99244.com-特彩吧旧版高手| www.667155.com-3b福彩实战擂台| www.236271.com-中国福彩中心| www.228111.cc-江苏快三有人控制吗| www.837029.com-7070彩票登录| www.946535.com-福建省体彩管理中心| www.iz7.com-快三怎么玩才能赢钱| www.wj32.com-大发时时彩预测软件| www.88427.cc-体彩排三彩吧论坛| www.076887.com-体彩高效订票| www.166459.com-快三开奖结果吉林| www.474056.com-网易彩票怎么样| www.602625.com-测试最近折彩票不准| www.668510.com-免费彩票统计软件| www.735156.com-五百万彩票邀请码| www.516473.com-中发彩票是什么意思| www.654154.com-128福彩软件| www.727218.com-神彩网app-| www.810911.com-3d彩吧精华布衣2| www.884681.com-鳄鱼彩票九哥| www.8360.in-海南七星彩下载软件| www.990544.com-南京福利彩票官网| www.0808.link-网上不能买足彩| www.885290.com-今期七星彩开奖结果| www.yf3.com-彩神t-|