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

知道了
亚洲28 www.994376.com-制作网络彩票平台| www.345543.cc-福彩三d精彩列表| www.585636.com-体育彩票双色球直播| www.699370.com-凤凰网买彩票靠谱吗| www.797111.com-五九九com彩票| www.926924.com-31竞彩吧下载| www.h47.biz-澳洲五分彩走势图| www.89nx.com-沈阳彩票站合作转让| www.00488.com-中国福彩公众号| www.91861.com-彩运8计划网址| www.731059.com-胜负彩开奖历史统计| www.7027.com-福彩首页-| www.654449.com-福彩一天销售额| www.734527.com-风采和风彩的区别| www.811854.com-双彩乡斋堂庙| www.478919.com-上饶体育彩票招聘| www.491694.com-今期四柱预彩图| www.736555.com-石家庄市彩票中奖者| www.207508.com-内蒙快三专测豹子| www.7028.cc-买篮球彩票的技巧| www.29600.com-神彩福牛首页| www.91153.com-加税美产无嘴好彩| www.056967.com-数字型彩票选号技巧| www.118104.com-福彩3d铁人铁胆| www.200071.cc-体彩体彩开奖号| www.273831.com-一分快三必中技巧| www.6236.wang-福彩3d开奖号| www.30qn.com-今天福彩推荐号| www.49nn.cc-重庆时时彩高手攻略| www.0525.xyz-今晚3d福彩开奖号| www.16469.com-能在足彩中赚钱的人| www.89588.com-国内彩票平台排名| www.082111.com-7728彩票下载| www.182602.com-快三开奖结果宁夏| www.pt24.com-江苏快三三军怎么投| www.m44.cc-湖北体彩新兑奖地址| www.15915.cc-老彩票主页-| www.095275.com-购彩彩票论坛| www.610687.com-沈阳市福利彩票中心| www.119537.com-快三儿-| www.23ml.com-下载123彩票| www.786.red-大乐透复式彩票| www.9878.win-快彩网官方直营| www.126207.com-菜彩票开奖查询| www.383526.com-深圳体育彩票周兑奖| www.511732.com-靠谱足彩外围网站| www.627359.com-双彩论让-| www.907557.com-六禾彩开奖结果查询| www.982485.com-竞彩实体店出票时间| www.38372.cc-福彩3d10和值表| www.001111.cc-大众六台彩开奘结果| www.111076.com-二手福彩机价格| www.191531.com-福彩快3内蒙古开奖| www.918101.com-网易彩票是真是假| 天天彩票www.106195.com| www.np21.com-双色球福利彩手机版| www.06rq.com-天下彩网彩票资讯网| www.350.in-中彩网福彩3d论坛| www.8181.top-大乐透彩票是假的吗| www.36858.com-730彩票黑了我| www.276551.com-苏州体育彩票网| www.382875.com-胜负彩17156| www.505548.com-期期好彩743c| www.206925.com-128彩票-| www.mz87.com-28彩票下载-| www.11at.com-彩娱乐彩票下载| www.694132.com-竞彩足球预测推存| www.790829.com-福利彩票怎么投注呢| www.868297.com-七星彩昨天的图纸| www.498994.com-什么是刷彩金| www.603675.com-梦到自己开彩票店| www.690053.com-333彩票网登录| www.775384.com-吉林快三亚好号| www.867183.com-v8彩app下载| www.926185.com-福建体彩31选7一| www.988399.cc-彩票必中计划| www.cw27.com-佰萬彩票下载| www.xr01.com-买彩票死守一个号| www.521326.com-加群买彩票-| www.666837.com-彩99苹果官方下载| www.794041.com-公务员能买彩票吗| www.055622.com-体彩规则中奖规则| www.793876.com-288彩票危险| www.54042.com-时时彩漏洞骗局| www.019158.com-彩票中奖者的技巧| www.036986.com-时时彩五星缩水在线| www.67723.com-抚州体彩中心地址| 福利彩票www.78700b.com| 丰彩娱乐www.fcyl3.com| www.327863.com-立彩彩票苹果版| www.58829.cc-福彩快三寻宝图| www.132173.com-彩礼返还标准| www.90027.com-怎么开彩票站| www.835530.com-福利彩票高频彩漏洞| www.217562.com-安徽快三今天推荐号| www.307654.com-派彩每日推荐双色球| www.391425.com-快三技巧大小单双玩| www.544365.com-福利彩票快3的玩法| www.630928.com-海南体彩开奖历史| www.300030.com-快三大小单双分析| www.373925.com-福利彩票中几个数字| www.251293.com-今日彩票app下载| www.362122.com-儿童赞美诗歌彩虹| 网易彩票www.07163i.com| www.523015.com-时时彩怎么杀码| www.619578.com-双色球守号中奖彩票| www.704893.com-彩336下载-| www.802710.com-长沙最大彩票大奖| www.886017.com-彩虹屁语录夸好看| www.967844.com-中港彩票网址| www.cai6955.com上海快三预测| www.495010.com-入侵博彩app| www.349099.com-足球彩票代理| www.387031.com-手机保护膜彩膜| www.47uo.com-彩票平投怎么赚钱| www.728601.com-彩吧助手3d开| www.259157.com-福彩双色球随机选号| www.635843.com-彩虹六号大盾墨冰| www.746711.com-燕赵福彩网排列五| www.978140.com-四川彩钢围挡| www.791.tv-八卦测福彩-| www.347448.com-南方双彩排五走势图| www.484003.com-丽水疯狂的黑彩| www.949845.com-福利彩票极速3d| www.209663.com-吉林快三盘在哪买| www.3110.me-江苏福彩快-| www.18972.cc-爱彩乐登陆-| www.213770.com-青海电子快三走势图| www.60233.com-国彩网app下载| www.9056.cm-邮政福彩306定投| www.890339.com-倍数高的彩票app| www.965444.com-下载彩神争霸| www.75jd.com-足彩单双什么意思| www.0735.wang-博发彩票高倍会中吗| www.5640.vip-彩虹六号会有国服么| www.792163.com-福彩中心领奖地址| www.541508.com-内蒙福彩3d出啥号| www.872465.com-彩票五分快三计划| www.967813.com-女生玩彩票-| www.cp3237.com-快三彩票代理合法么| www.rh29.com-极速时时彩彩开奖| www.296417.com-福彩快3qq群| www.357612.com-国外算彩票的数学家| www.412768.com-福彩3b走式图| www.495124.com-58彩票怎么下载| www.318999.com-三分时时彩是真的吗| www.472878.com-国彩三地丹东三板| www.365934.cc-金目福彩开奖号码| www.166013.com-68彩票网是否合法| www.251887.com-江苏快三投柱技巧| www.218299.com-福彩押大小-| www.7787.net-七彩神仙鱼孵化技巧| www.430433.com-14场足彩走势图表| www.222083.com-北京体彩中心| www.2275.com-凤城麻将彩杠| www.0920.bid-陕西福彩结快乐十分| www.061314.com-2彩88官网-| www.74286.com-福彩双色球出号规律| www.335073.com-广西快三诀窍| www.495328.com-彩票税收-| www.026940.com-福彩快三辽宁| www.5839.net-足彩竞猜的玩法介绍| www.23227.com-河北快三走是图| www.326726.com-乐彩网论坛静态版|