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.hnhjgfj.net</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.446789.cc-福彩子涵照片| www.389802.com-众购彩票导航网址| www.8080.me-水彩手绘-| www.247448.com-上海快三时间段| www.436900.com-福彩3d组选图| www.591616.com-男女结婚彩礼问题| www.732068.com-彩票中奖多少天过期| www.yx25.com-我中了彩票官方网| www.195567.com-广西快三奖金规则| www.729982.com-九鼎彩票平台| www.291819.com-高频彩哪个平台正规| www.17527.cc-快三开奖北京| www.739767.com-盛源彩票app下载| www.840080.com-今天的电脑彩| www.919538.com-一键搭建彩票平台| www.982740.com-783彩票-| www.th93.com-全天安徽快三计划网| www.144285.com-728彩票安装| www.il94.com-发短信教你买彩票| www.826.space-天齐网图库彩吧论坛| www.322.in-金巴黎彩票平台下载| www.5642.vip-河南快三中2个数| www.y61.club-贵州快三开奖规则| www.82188.com-国外彩票网-| www.4505.tv-彩票站买什么赚钱| www.194636.com-快三买大小单双技巧| www.og81.com-手机买彩票软件大全| www.21as.com-88彩票网是真是假| www.132.cx-彩虹??的含义| www.771926.com-盈盛国际时时彩| www.703281.com-乐盈彩票登录| www.850925.com-网络销售彩票好做吗| www.958827.com-春节后彩票开奖日期| www.cp3115.com-彩票端骗局-| www.954264.com-老时时彩时时中彩票| www.209553.com-正规的彩票合买平台| www.97kj.cc-最新博彩注册赠送| www.740937.com-快三qq群导师| www.095670.com-中彩吧zcb588| www.196836.cc-福彩体彩开奖查询| www.299991.com-彩票走势图管用吗| www.376769.com-彩票机致万人中奖| www.552146.com-快3走势图爱乐彩| www.624273.com-乐彩彩票手机版导航| www.806456.com-体彩足球四乘四| www.888216.com-汇彩国际骗局揭秘| www.973789.com-腾讯分分彩平台推荐| www.fp97.com-北京快3福彩app| www.yq26.com-附近福利彩票站| www.cai3389.com河南快三预测| www.ne96.com-彩13-| www.t46.bid-福利彩票网上| www.617325.com-冠盈彩票-| www.697651.com-彩票要当天买吗| www.216861.com-那个快三遗漏号码| www.290997.com-地方彩票开奖| www.356884.cc-过生日送彩票| www.241292.com-七星彩全年包码| www.186180.com-快三中2个号算吗| www.176220.com-江苏快三稳赚计划| www.056816.com-河北福彩3d字谜| www.673235.com-七星彩去哪兑奖| www.838999.com-一分快三口诀| www.ad65.com-七乐彩开奖结果| www.045591.com-83彩票网-| www.155607.com-体彩19017排五| www.268683.com-佳缘出现彩票骗局| www.386625.com-韩国有足球彩票吗| www.522153.com-亿彩彩票合法吗| www.73675.com-福彩3d字迷画谜| www.8758.vip-在顺盈彩票赛车| www.700176.com-福利彩票快三手机版| www.88nv.com-盛世彩票黑过钱吗| www.587386.com-奥客竞彩手机版| www.6836.cn-大乐斗彩票怎么玩法| www.899742.com-天天彩网站-| www.xf36.com-七彩视界官网下载| www.398.cc-辽宁彩票中心| www.889729.com-陆金彩票预测| www.974715.com-1588彩票app| www.cp4652.com-彩票破解神器手机版| www.ot36.com-江苏快三走势图定牛| www.709128.com-1305彩票软件| www.31654.com-怎样利用福彩店赚钱| www.879619.com-北京快乐彩合法吗| www.867836.com-七星彩重复中奖号码| www.935832.com-一分快三是不是假的| www.980140.com-福彩生意冷淡| www.cai504.com-快三计划软件app| www.269118.com-a3彩票app-| www.384907.com-d9彩票网站平台| www.603655.com-彩票代打什么意思| www.758520.com-彩薇花美容霜| www.444100.cc-福彩3d和跨-| www.623655.com-三星彩票app下载| www.392051.com-关小刀足彩-| www.574438.com-数学天才计算彩票| www.678535.com-唯彩旧版下载安装| www.298563.com-时时彩后三混选稳赚| www.4793.cn-体彩竞彩258彩票| www.833510.com-口袋彩店app苹果| www.135379.com-互动彩票平台| www.582038.com-天天乐彩票是真的吗| www.678068.com-快三多少期是一周期| www.924935.com-也买彩是骗人的么| www.257712.com-保定体彩中心| www.950763.com-每周彩票开奖时间| www.oa62.com-百盈快三规则| www.590391.com-幸运彩网站是真的吗| www.667743.com-彩票1千本金| www.762831.com-有没有破解分分时彩| www.838026.com-澳洲男子彩票全中| www.101427.com-足彩欧赔的分析技巧| www.3227.shop-福彩快3预测分析| www.957418.com-足彩任九开奖| www.af25.com-彩票最快开奖| www.d52.club-大数据买彩票| www.453.vip-体彩283玩法介绍| www.61xl.com-手机里怎么买彩票| www.513788.com-彩票下载app送金| www.583138.com-彩票网2元-| www.763262.com-足彩外围正版网站| www.857240.com-网上买彩票| www.917654.com-彩库宝典下载到手机| www.972200.com-印尼五分彩开奖结果| 中彩网www.91233s.com| www.08786.com-4188彩票-| www.510449.cc-怎么下载体育彩票| www.621846.com-福彩3d定位词| www.117897.com-彩富足彩网-| www.795408.com-百盈快三投注计划| www.891246.com-幸运10时时彩| www.954205.com-彩109app下载| 亿彩彩票www.588yc.com| www.089665.com-七乐彩精准预测| www.202510.com-彩人帮专栏-| www.34993.com-快三下注技巧| www.040908.com-一分快彩怎样玩| www.163075.com-福彩3d字谜最新| www.254042.com-七星彩早版808网| www.009043.com-入侵私人彩票软件| www.367900.com-刚力彩芽男-| www.532083.com-念什么咒语能中彩票| www.275252.cc-湖北快三走势图基本| www.875337.com-手机上可以玩的彩票| www.970492.com-重庆快三是什么彩票| www.118717.com-中国福彩中奖| www.877017.com-快餐彩票怎么玩法| www.981522.com-93彩票安卓版| 126彩票网www.821260.com| www.8408.cn-七星彩票手机下载| www.829644.com-签到送彩金彩票平台| www.904495.com-500万足彩比分| www.972907.com-彩虹玫瑰多少钱一只| www.9242.xyz-lcz9购乐彩站| www.261039.com-竞彩九场开奖奖金| www.026489.com-三地彩吧助手走势图| www.183381.com-福利彩票甘肃快3| www.jp67.com-神彩8大发彩| www.g41.cc-彩票360官网大厅| www.28dh.com-福利彩票网购平台| www.93ou.com-易彩堂总公司这那里| www.491908.com-彩之网双色球开奖| www.022411.com-vr时时彩-|