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.jdhf-bj.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.770336.com-港版好彩香烟| www.5433.org-湖南竞彩快三| www.31481.com-双色球易彩网预测| www.19cb.com-星期五什么彩票奖| www.3166.net-彩票组合软件哪个好| www.326553.com-七星彩兑奖期限多长| www.435543.com-体育彩票点抽成| www.560890.com-彩票行业五行属于| www.894810.com-彩票助赢网页版| www.984159.com-彩吧三天计划| www.au36.com-福彩20选8-| www.yi30.com-附近时时彩票投注站| www.963087.com-江苏福彩如何兑奖| 豪彩VIPwww.808390.com| www.2bw.com-那个网站能买彩票| www.700485.com-足彩兑奖-| www.816127.com-彩票双色规则| www.913234.com-彩票两2元网| www.fk79.com-分分彩计划软件| www.7kx.com-彩票中奖后怎么花| www.646537.com-块3福彩app-| www.232200.cc-时时彩定胆-| www.371862.cc-牛彩是什么靠谱吗| www.kh23.com-江苏快三遗漏统计值| www.06tt.com-体彩超级大乐超透| www.3717.pw-云南省福利彩票3d| www.149301.com-人人与彩票软件下载| www.567405.com-东方6十1彩票| www.706140.com-河南快三规律| www.98hu.com-高清炫彩壁纸| www.040592.com-买彩票中大奖大乐透| www.875906.com-宝马彩票官方网站| www.37np.com-彩票开奖勇士争先| www.ut74.com-甘肃快三号码推荐| www.42oi.com-时彩稳赚技巧| www.994353.com-体育彩票兑奖查询| www.gu67.com-百盈彩票有人赢了没| www.zy63.com-七星彩画规律表| www.142622.com-飞翔国际彩票骗局| www.197217.com-澳洲五分彩开奖网址| www.785868.com-今日体彩排列三图谜| www.673503.com-安徽快三怎么算和值| www.877228.com-时时彩3第-| www.cp9619.com-湖北快三电视走势图| www.456392.com-福彩3d今天怪字图| www.188726.com-福建快三2同号遗漏| www.826611.com-个体彩字谜-| www.572666.com-天天彩票开奖网| www.722755.com-省份快三彩票| www.265978.com-彩票宁夏中奖| www.546878.com-怎么申请福彩| www.892498.com-彩票榜可信吗| www.py6.com-快三计划和值| www.505290.com-竞赢彩票真的假的| www.238.net-购买足球彩票| www.530033.com-掌上彩票打不开| www.607726.com-体育彩票35选七| www.066135.com-统一彩票官网| www.3265.net-分分钟彩票下载| www.c73.vip-掌中彩-| www.335846.com-吉林快三输了千万| www.p90.online-博大彩票是正规的吗| www.081509.com-彩票游戏app| www.194877.com-彩票代玩账号兼职| www.be20.com-喜乐彩票-| www.165613.com-彩票晒单-| www.351481.com-彩客彩票滚球| www.554543.com-体彩术语砍-| www.6651.cc-豹赢彩票最新版本| www.707801.com-彩票18彩金-| www.852324.com-2018彩票软件| www.222523.com-菲律宾正规彩票平台| www.308448.com-福利彩票几率计算器| www.73780.com-45111彩民论坛| www.230081.com-共享彩票贴吧| www.640093.com-3d众彩网-| www.730990.com-双色球易彩网机选号| www.850569.com-家庭成员生日彩票| www.948579.com-福彩3的定位| www.jq06.com-宁夏快三下载安装| 百姓彩票www.bxcp3.com| www.909554.com-福彩3d资料大全| www.516311.com-金巴黎彩票平台| www.169711.com-正规的购彩app| www.85au.com-炫彩之剑坐标| www.8552.org-七星彩前四位缩水软| www.tj6.cc-如何跳好快三| www.35534.com-点点中彩票下载| www.7500.cn-便利店销售彩票| www.786038.com-逍遥软件彩票统计器| www.996652.com-福彩浙江12选5| www.0883.net-山东福彩交流区| www.mq88.com-网络福彩3d骗局| www.qz57.com-足彩玩法串法介绍| www.745820.com-如何下载冀彩宝| www.15863.com-玩华夏彩票有多少人| www.3635.biz-彩票大师出品| www.299752.com-好彩app0567| www.485.me-石家庄福彩-| www.828633.com-英国彩票不交税吗| www.947493.com-极速3d彩票网站| www.999486.com-大運彩票-| www.zn1.com-河北省快三遗漏提示| www.97983.cc-专业时时彩软件| www.123225.com-欢乐彩app网址| www.203052.com-福彩精彩快乐10分| www.711739.com-五分彩彩票计划网| www.378192.com-体育彩票出的什么号| www.381474.com-7星彩号码-| www.872969.com-彩票时时彩后三| www.982280.com-六福彩香港正挂牌图| www.sg84.com-时时彩计算原理| www.3700.top-领航彩票软件怎么样| www.241200.cc-彩虹代表的意义| www.325686.com-360彩票大厅首页| www.397073.com-澳贝彩票平台可靠吗| www.716821.com-彩铅鸟-| www.796904.com-3d彩票计算方法| www.881046.com-福彩sd新彩网| www.y99.top-云彩厅是骗局吗| www.30ti.com-彩虹六号耶格什么梗| www.784788.com-七k官方彩票网| www.857189.com-网络彩票骗局菲律宾| www.919722.com-河北快三预测送一柱| www.982509.com-万达时时彩平台注册| www.192793.com-如何买彩票-| www.326237.com-易彩彩民福地网址| www.119174.com-全发国际彩票怎么样| www.5115.net-锋彩直播电视正版| www.27121.com-福彩和尾振幅走势图| www.254065.com-22彩票-| www.31199.com-下载12彩票-| www.022800.com-天津时时彩玩法| www.559922.com-彩图-| www.43eu.com-约彩123-| www.401030.com-财财迷迷七星彩预测| www.752366.com-福彩3d杀码村| www.825657.com-私人彩票pk10| www.899665.com-幸运彩开奖-| www.952258.com-中国彩票官方版下载| www.988300.com-甘肃快三走势与预测| www.kj5.cc-湖北福彩快三官网| www.708405.com-c彩61官方网站| www.9cz.com-上海福利彩官方网| www.45rf.com-彩票精算出来| www.692516.com-98福彩网-| www.023184.com-玩重庆时彩输钱的人| www.247914.com-爱彩乐福建十一选五| www.019972.com-最新快三玩法| www.629778.com-多彩乐吉林快三| www.382213.com-彩票中1万交锐吗| www.334062.com-彩票和值振幅走势图| www.368111.com-彩芽的好奇心动漫| www.pa24.com-极速虎彩票-| www.4557.biz-海南七星彩开奖| www.962017.com-福彩3d摇奖号软件| www.ci30.com-一分彩是不是真的| www.4by.com-体彩史上最大奖| www.746377.com-彩票免费预测大师| www.130597.com-多盈彩票平台注册| www.8061.xyz-玩手机彩票怎么回本| www.156630.com-网上黑彩票怎么赚钱| www.a42.win-足彩任九19039| www.60vr.com-网易彩票代理挣钱吗|