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.jg0839.com.cn</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.65533.cc-易语言炫彩-| www.131876.com-潍坊彩礼钱的价格表| www.257237.com-彩票开挂-| www.650096.com-开机号中华彩票网| www.34892.com-福彩3d井奖结果| www.1if.cc-十堰市体彩中心| www.5749.com-彩票网站值得相信吗| www.091040.com-百福彩软件-| www.04ic.com-彩铅国庆绘画作品| www.798263.com-体育彩票让球胜平负| www.69973.cc-盛世彩票导航入口| www.317087.com-中华彩票网手机版| www.cb66.com-彩51app苹果| www.554.cm-亿彩网骗局-| www.424.tv-3d中奖彩票票面| www.28858.com-体彩店经营外围| www.99326.cc-时时彩安卓版下载| www.833092.com-天吉彩票论坛手机| www.751652.com-特网彩票分析系统| www.636166.com-彩虹六号有多少钱的| www.104108.com-黄好彩爆珠-| 大赢家彩票平台www.701651.com| www.000195.com-浙江体彩手机下载| www.104938.com-盛大彩票app| www.208417.com-腾讯十分彩官网| www.317908.com-淘宝彩票手机客户端| www.2006.in-体彩任九开奖金额| www.29751.com-90彩票登录-| www.nv17.com-买黑彩票属于赌博吗| www.31537.cc-中国福利彩票第| www.545865.com-福彩有没有分分彩| www.744561.com-弘升彩票-| www.822963.com-彩票网哪个是正规的| www.mx79.cc-中国彩吧3d试机号| www.997235.com-网络彩票算诈骗吗| www.187654.cc-时时彩开彩结果查询| www.60bi.com-专业玩彩个人论坛| www.5642.org-双胜彩什么意思| www.34181.com-保定福彩中心电话| www.589138.com-159彩票网可靠吗| www.700094.com-广西快三计划网页版| www.8705.cm-七星乐彩开奖号码| www.45087.com-福利彩票站提成| www.408365.com-福彩大富翁论坛| www.646654.com-职业买彩票的有吗| www.932308.com-怎么玩七星彩三字定| www.d67.top-亚博科技阿里彩票| www.57og.com-三分时时彩35彩票| www.924500.com-彩票最高中奖多少亿| www.889178.com-易彩网怎么注册| www.732388.com-重庆结婚彩礼10万| www.845549.com-福彩彩票种类| www.562195.com-开乐彩官方网站| www.26808.com-怎么选七星彩| www.501838.com-七乐彩中5个号有奖| www.617.website重庆时时彩在线预测| www.6329.cc-福彩3d一点通全图| www.g29.xyz-福彩3d过滤缩水| www.22659.cc-私彩网站破解| www.207588.com-彩票工具-| www.358213.com-易经破解七星彩| www.517579.com-皇冠集团彩票谁知道| www.9456.net-幸福彩频道双色球| www.24611.com-简单好看彩铅画风景| www.37112.cc-彩票平台需要维护吗| www.87591.com-开体育彩票竞彩店| www.05042.cc-大圣彩票app下载| www.876100.com-新启航分分彩| www.990107.com-u9彩票靠谱吗| www.mp20.com-时时彩回血平投| www.e22.cc-凤凰网彩票开奖查询| www.184269.com-彩票开奖查询公告| www.9455.cm-在英国买彩票中奖了| www.068138.com-国外彩票网站出租| www.jy15.com-广西快三不同推荐号| www.124412.com-买彩票幽默句子| www.051174.com-3d通福彩下载安装| www.96282.cc-为啥要快彩调整| www.527356.com-时时彩对子规律| www.949279.com-500购彩骗局| www.cp3855.com-福利彩8合法吗| www.18735.com-彩票33交流-| www.509231.com-鑫鑫彩票是真的吗| www.973392.com-彩虹哥夏天-| www.20uf.com-彩票2019034| www.006825.com-福彩三d字谜图谜| www.694856.com-体育彩票61兑奖| www.785505.com-xr有原彩显示吗| www.874612.com-福利彩票兑奖有提成| www.950915.com-时时彩彩神通| 奔驰彩票www.29178d.com| www.os95.com-福彩3d基本走势| www.75hg.cc-那个软件可以买体彩| www.283.cn-七星彩票官方软件| www.au98.com-快乐彩十分钟| www.498899.cc-彩票500邀请码| www.611167.com-福彩3d多彩网总汇| www.720821.com-2元彩票网官网下载| www.859889.com-瑞彩祥下载链接| www.947121.com-狅欢彩票-| www.en12.com-禁止互联网销售彩票| www.060383.com-排三家彩开奖网站| www.93un.com-彩色创意画-| www.525874.com-全民彩票安卓版下载| www.599720.com-众彩易购是什么快递| www.669159.com-怎么在美国买彩票| www.753562.com-手机买彩票全球彩票| www.812748.com-福彩3d开奖号漏洞| www.877599.cc-多网彩迷-| www.935730.com-彩名堂技巧-| www.979977.com-乡可以开彩票店吗| www.hm0.com-博彩屠龙技巧| www.mz15.com-爱彩乐天津-| www.702559.com-竞彩错一场圈套| www.780178.com-福利彩票申请代销点| www.855833.cc-七乐彩一般中奖金额| www.913251.com-好彩客是非法| www.965659.com-彩票宝中提现失败| 万利www.32123y.com| www.cr48.com-体育彩票加盟| www.ra95.cc-时时彩不会输的方法| www.jv12.com-彩票是不是正规的| www.xl60.com-江苏快三技巧在哪里| www.507225.com-能网上买彩票吗| www.562661.com-唐龙两码和淘彩吧| www.90ai.cc-电竞博彩能玩吗| www.917997.com-竞彩足球直播新浪| www.985831.com-足彩推荐分析软件| www.js20.com-王者彩票安卓下载| www.nv0.cc-幸运彩视频在线直播| www.mg99.com-好彩app是骗局么| www.61636.com-3d彩票八卦图| www.086146.com-聚宝彩票合法吗| www.w88.name-合法彩票软件| www.67yq.com-汇彩网是什么意思| www.139574.com-彩票之家下载安装| www.007184.com-腾讯有5分彩吗| www.092526.com-彩导航比特币| www.163217.com-福彩手机版3d字谜| www.279572.com-分分彩出龙虎规律| www.881520.com-高频彩票概率学| www.965240.com-uu快三有技巧吗| 鑫彩网www.292866.com| www.289425.com-5分彩开奖号码| www.427238.com-开彩票站挣钱吗| www.530513.com-锋彩直播电视版| 易彩网www.12455c.com| www.1826.org-肥城体彩-| www.301656.com-苹果彩票网登录| www.414543.com-彩之云理财合法吗| www.zg11.com-博彩一开始怎么推广| www.984412.com-彩票大师软件可靠吗| www.bp83.com-彩票过滤选号软件| www.028296.com-高频彩网-| www.95499.com-国足体彩-| www.037953.com-778彩票网app| www.886714.com-微信中国彩-| www.944201.com-上海体彩兑奖时间| www.985324.com-彩票728-| www.cp478.com-湖北快三号码推荐| www.86873.cc-问题彩民药方难开| www.043444.com-广西体彩网官方网| www.110279.com-七星彩两定包码方法| www.0518.cm-江苏体彩大乐透官网|