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

知道了
9彩注册 www.123425.com-新昌双彩下岩张玉安| www.7444.top-彩票开店限制| www.31013.com-苹果下载彩票软件| www.505943.com-体彩案件-| www.948621.com-体彩排列三组选| www.nm43.com-唯彩网-| www.561527.com-福彩双色球怎么买| www.669915.com-彩色水泥地面做法| www.804749.com-福彩双色球选号范围| www.924912.com-彩票还能相信吗| 福彩www.2109d.com| www.217802.com-内蒙古时时彩彩开奖| www.293527.com-河南快三玩法说明| www.364791.com-强力巨彩-| www.128953.com-七乐彩票游戏规则| www.fu04.com-彩票带人计划| www.770942.com-开彩之家-| www.861632.com-彩票开奖下载安装| www.951284.com-彩票竞猜金豆| 中国福利彩票www.08588s.com| www.fn98.com-富贵彩票下载手机版| www.273769.com-分分时时彩计划全天| www.8975.loan-旺彩双色球大乐透| www.mg70.com-爱乐彩票合法吗| www.2qz.cc-金利彩票是干啥的| www.62yb.com-在顺发彩票网| www.752219.com-网上彩票能相信不| www.926613.com-瑞彩网是真的吗| 亚洲www.391109.com| www.3966.live-378彩票下载| www.25237.cc-彩铅绘画人物技巧| www.77758.com-下载尊彩网-| www.29ov.com-蓝彩推荐-| www.161771.com-美国洛杉矶国际快三| www.141005.com-湖北福彩官方电话| www.239181.com-腾讯快三是什么| www.120838.com-好听的体彩店名字| www.664208.com-头彩app最新版| www.763261.com-五亿彩票是真实的吗| www.858111.com-福利彩票关闭时间| www.948201.com-贵阳福彩中奖未领取| 博友彩www.993621.com| www.70465.com-好彩票提现-| www.062386.com-彩之家官方旗舰店| www.018832.com-香港彩富网免费资料| www.158255.com-彩投知乎-| www.283199.com-七星彩中5-| www.377161.com-97彩票彩种| www.815600.com-排列五是体彩吗| www.882427.com-体彩排列五走逝图| www.966018.com-快三最佳追号时机| www.cp292.cc-今天福彩快三| www.c38.host-中国福彩票开奖号码| www.667427.com-吉隆坡时时彩| www.761229.com-阳光彩票是骗人的吗| www.934598.com-盈彩网如何注销账号| 大赢家彩票平台www.916570.com| www.ud19.com-神彩福牛双色球预测| www.425001.com-彩虹冰淇淋店游戏| www.pj0.com-网上购彩app| www.478.tv-时时彩组选三玩法| www.6556.in-排三太湖双彩论坛| www.32032.cc-能提现的彩票软件| www.026844.com-八度彩票官方平台| www.874810.com-七k彩票-| www.626364.com-深圳市鑫彩晨科技| www.951229.com-500足彩胜负| www.809745.com-办理彩票销售| www.899639.com-81c八一彩-| www.972194.com-快三在线计划网| www.nt4.com-3d彩票走势图| www.86go.com-今天北京快三| www.115112.com-江苏福彩如何兑奖| www.57496.com-快购彩票下载软件| www.cl06.com-北京快三走遗漏| www.974248.com-环球彩票网站首页| www.14ew.com-福彩在线直播开奖| www.493290.com-热购彩票网址| www.448332.com-腾凤凰分分彩| www.kc07.com-168彩票登陆| www.35or.com-重庆市彩是官方的吗| www.554753.com-买彩票亏了一万| www.705.live-天马彩票彩种| www.261705.com-竞彩足球数据| www.959025.com-彩票吾爱破解| www.902955.com-幸福彩票幸运相伴| www.712032.com-彩礼嫁妆比例| www.979394.com-时时彩送彩金| www.9gl.com-新浪彩票电脑版| www.35813.cc-重庆时时彩合买跟单| www.494342.com-辽阳彩票站出兑信息| www.cai34.com-新快三网站-| www.n77.cm-福利彩票怎么查中奖| www.34579.com-七彩奖开如果| www.019455.com-天天中彩网下载| www.578563.com-手机看开彩现场直播| www.762881.com-时时彩万能码公式| www.923007.com-福彩3d开机号试| www.999697.com-200彩票-| www.gw64.com-盈彩骗局揭秘| www.7wi.cc-a8彩票下载安装| www.72wy.com-足彩跟单稳赢的技巧| www.3018.pw-福彩3d开r奖| www.9595.name-福彩大奖领奖安全吗| www.51237.cc-趣9购老彩票| www.e52.com-大玩家彩票登录网站| www.814544.com-彩票游戏开元棋牌| www.335370.com-360体彩网官网| www.25002.com-简单小清新彩铅画| www.12162.com-51彩票官方下载| www.786672.com-博123彩票-| www.889172.com-app易彩乐-| www.972604.com-123彩票网址| www.cai953.com-快三群里都是托吗| www.kd58.cc-福彩网是真的吗| www.zz08.com-22彩票注册网址| www.681258.com-七星彩诈骗链接| www.860137.com-福彩快三追号计算器| www.938100.com-彩易彩公式软件| 大赢家彩票平台www.760320.com| www.b12.pw-澳门博彩app下载| www.699524.cc-中国竞彩官网计算器| www.791206.com-彩票数字分析仪| www.898819.com-宁夏福彩app| www.969809.com-彩票线路导航中心| www.tj69.com-爱购彩票-| www.53oy.com-彩票达人下载安装| www.668290.com-国外彩票奖金带回国| www.790977.com-福彩12选五助手| www.913298.com-彩客网苹果怎么下载| 中国福利彩票www.08588n.com| www.312217.com-彩票长龙计划| www.79lu.com-福彩到底是真是假| www.4004.tv-澳门彩票官方网| www.065558.com-彩票举报平台登录| www.021199.com-福彩3d老谢预测| www.133774.com-好彩高手论公式| www.26oq.com-十分快三输钱| www.435797.com-投彩网c97m-| www.139475.com-致享7彩福-| www.570392.com-789彩票-| www.79944.com-江苏快三独胆玩法| www.066468.com-湖北新快三-| www.659303.com-有微信彩票合买群号| www.762357.com-87彩下载地址| www.877455.com-福彩迷快三-| www.970429.com-体彩任选5开奖| www.am37.cc-亿网彩票-| www.b41.pw-江西福彩助手正规嘛| www.40ap.com-7星彩近200期| www.0751.xyz-快三做号-| www.560549.com-kk彩票网骗局| www.50848.com-亚博彩票加盟| www.63tv.com-中彩网最准单双四肖| www.541897.com-京东进军彩票| www.775559.cc-江苏快三官方计划网| www.907730.com-快三时间调整| 51彩票www.380068.com| www.978541.com-福彩3d实战彩票网| www.us8.cc-福利彩票开奖结果i| www.293526.com-河南福彩百度网| www.366564.com-彩票双色球33期| www.99wb.com-官方pk彩票-| www.04po.com-彩铅渐变色怎么涂|