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.tlgltg.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.iv28.com-竞彩360直播| www.10xd.com-彩票代买兼职| www.800201.com-彩票端快3-| www.z38.net-快彩是什么东西| www.650044.cc-印尼博彩业合法| www.851199.cc-福彩定胆的方法| www.969523.com-彩票计划团队哪个好| www.q79.com-双阳黑彩-| www.2820.vip-好彩在线app| www.341268.com-数字彩票走势分析| www.09cg.com-彩票306官方网站| www.266836.com-江苏快三预测号码| www.s71.link-彩票中奖最高记录| www.87603.com-彩6a官网平台| www.119616.com-河北福彩排列七结果| www.57546.com-彩票中奖后付款骗局| www.15fr.com-彩虹10飞机-| www.365136.com-田伟足彩宝-| www.516308.com-金巴黎彩票平台下载| www.611564.com-彩虹六号本子资源| www.697247.com-体育彩票几点开奖| www.806586.com-32期七星彩-| www.31rg.com-爱彩彩票怎么注册| www.810.bid-体育彩票浙江6+1| www.78uo.com-广东天彩快三app| www.tr61.com-彩票合买app| www.28214.com-中国彩票骗局的案例| www.101378.com-中彩网投注-| www.03543.com-七星彩被骗-| www.009238.com-彩客网旧版本| www.135671.com-体彩店装潢-| www.956323.com-28高频彩-| www.05zv.com-冀彩宝客户端官网| www.121035.com-福彩双色球选号秘诀| www.z50.cc-天天彩票坑人吗| www.87zj.com-444彩票网-| www.3838.bid-3的双彩论坛首页| www.845617.com-体彩足球竞彩二等奖| www.695819.com-网络彩票诈骗| www.690703.com-九场足彩奖金| www.944747.com-附近哪里有体彩店| www.cp839.com-福彩快三app| www.00xx.com-美丽的彩虹像什么| www.421500.cc-体彩短信投注双色球| www.332635.com-热购彩票登录| www.017017.cc-盈彩网江苏快三| www.358974.com-8月17日七星彩| www.901982.com-吉林市抓黑彩庄家| www.974210.com-好运来彩票网骗局| www.ab86.com-快三投注第一门户| www.zu95.com-彩虹5无人机发动机| www.72xl.com-彩世界怎么下载不了| www.3945.com-体育竞彩今天开奖不| www.57177.com-长春市黑彩举报电话| www.051853.com-9万彩票app-| www.102266.com-五省快三基本走势| www.7881.com-彩票开奖号码三d| www.61683.cc-海南7星彩高手| www.062750.com-今日竞彩专家预测| www.4456.xyz-zc5.com尊彩| www.728.com-竞彩足球怎么提现| www.7312.bid-洛阳福彩中心销售量| www.33612.cc-19042胜负彩| www.692965.com-彩票电话投注| www.922702.com-体彩店开业宣传单| www.990852.com-4s彩票资料站| www.jb21.com-河北快三开将走势图| www.559330.com-彩经网大乐透开机号| www.680665.com-时时彩倍投计算| www.889830.com-nba篮彩在哪里买| www.975284.com-彩票奖号-| www.gn11.com-郑州市区彩礼| www.904019.com-号百彩票下载安装| www.02ah.com-关于彩虹的诗句| www.82yn.com-百度福利彩票| www.9645.cn-凤凰彩票外挂| www.318529.com-贵州省快三预测推荐| www.7088.tv-德清七彩假日宾馆| www.748618.com-一分赛车彩票技巧| www.938297.com-共赢国际彩票| 至尊彩www.c229.com| www.949.win-百胜快三助手下载| www.26is.com-彩票19023期| www.764567.com-彩票检举-| www.136086.com-足彩缩水软件手机版| www.269331.com-彩票站打错号码案例| www.23258.com-国彩app推荐几款| www.81969.com-中华福利彩票网址| www.088035.com-共赢福彩app| www.447033.com-众购彩票下载安装| www.556010.com-手机彩票哪个靠谱| www.218677.com-台北快三计划| www.332699.com-京彩集团app| www.545769.com-福利彩票向谁申请| www.672506.com-我附近的体育彩票站| www.797177.com-竞彩投资计划| www.576440.com-福利彩票多少倍| www.149929.com-掌中彩真的假的| www.md42.com-好运彩彩票官网| www.20zd.com-台灣彩虹旗娛樂論壇| www.056126.com-奥客体育彩票电脑版| www.37463.com-什么叫做购彩计划| www.372825.com-永城彩票网-| www.109093.com-下载567彩票网| www.026831.com-兼职购彩-| www.226137.com-福彩害了多少人| www.31585.cc-麒麟竞彩下载链接| www.00md.com-描写彩虹的看图写话| www.362.gg-乐彩关注码-| www.4973.cc-幸运中彩票旧版本| www.v15.shop-彩吧论坛中国最大| www.705376.com-帝王彩-| www.664970.com-福利彩票第39期| www.720303.cc-七星彩窍门-| www.9718.in-机乐型彩票-| www.435984.com-海口七星彩早版| www.761439.com-彩票中一亿交多少税| www.857828.com-盈盈彩计划群| www.917993.com-彩虹图片大全大图| www.972941.com-日彩网怎么玩不会亏| www.cp2121.com-分分时时彩技巧| www.h02.top-万彩吧双色球预测| www.966231.com-亿彩网靠谱吗| www.59297.com-福彩站怎么赚钱| www.189477.com-玩时时彩怎么稳赚| www.277666.com-魔方彩票可靠吗| www.2292.pw-湖北快三两码遗漏表| www.113135.com-七乐彩胆拖投注表| www.359777.com-七星彩会员用户登录| www.322897.com-查彩票开奖下载什么| www.282332.com-时时彩9码计划软件| www.326173.com-彩宝网福彩3d走势| www.486481.com-竞彩蓝球玩法讲解| www.577334.com-彩票今日开奖查| www.666948.com-v9彩票下载安装| www.17nx.com-银杏娱乐时时彩计划| www.536315.com-什么彩票最容易中| www.327289.com-开奖公告、百度彩票| www.415773.com-uc彩票app-| www.519948.com-彩票分析培训靠谱么| www.577734.com-湖南的体彩幸运赛车| www.625857.com-网络彩票的管理到位| www.680672.com-体彩彩票店害人| www.742000.com-彩票730-| www.100099.cc-聚彩彩票平台刷流水| www.389755.com-体育彩票店在哪| www.520254.com-体彩双胆预测专家| www.617596.com-万州体彩销售点| www.732627.com-体育彩票19044| www.657087.com-福彩游戏机怎么赢钱| www.424522.com-彩73苹果下载| www.782872.com-易购彩赚钱是真的吗| www.975774.com-结婚彩礼-| www.s32.club-太湖字谜乐彩论坛| www.61602.com-七星彩五行算法| www.099917.com-百宝彩清海快3| www.789967.com-三地图迷福彩| www.954891.com-赛马会彩票-| www.82.cm-杏彩论坛-| www.312689.com-9购彩票官网| www.me7.com-福彩七乐彩-| www.jn51.com-网上买彩票骗局套路| www.884790.com-三彩彩票合法吗| www.975886.com-上蔡结婚彩礼|