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.bieyiwei.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.mx66.com-彩报网-| www.7334.in-198彩官网下载| www.45943.com-11选5官方彩票网| www.bc.cc-北京快三推荐号一定| www.rq35.com-快十分钟彩票| www.995714.com-足彩赔付率计算公式| www.540795.com-993彩票下载| www.378964.com-香港五分⑥和彩| www.617128.com-牛彩彩票是假的吗| www.351717.com-网彩赌博平台| www.038677.com-一等奖彩票图片| www.800686.com-快3是福利彩票吗| www.956888.com-欧洲百万彩开奖结果| www.cai09.cc-快三规则-| www.89ea.com-竞彩九串一-| www.54776.com-6188彩票网页版| www.40qm.com-最新彩票排第一网站| www.10353.com-胜负彩欧盘亚盘| www.879455.com-联运彩票pp-| www.qo.com-中彩票-| www.659057.com-彩票开奖七星彩排五| www.817780.com-网上赌博送彩金| www.954071.com-超级时时彩缩水手机| www.dh98.com-湖北快三好假| www.d31.bid-足球彩票预测分析| www.0044.me-体彩是多少数字| www.xo91.com-彩票app下载大全| www.947986.com-四川省体育彩票兑奖| www.bv11.com-快三开奖结果青海| www.d44.space-人工智能彩票算法| www.986880.com-全天时时彩计划万位| www.386221.com-福利彩票新人怎么买| www.739625.com-爱彩乐是哪个公司| www.911387.com-英国五星彩开奖结果| www.36006.com-彩友吧预测总汇| www.005763.com-汪汪时时彩官网| 大赢家彩票www.394211.com| www.cp192.cc-玩快三怎么才能赚钱| www.763803.com-快三豹子1呗多少钱| www.32353.cc-彩色纸箱印刷供应| www.024696.com-竞彩什么叫双平| www.47is.com-彩仙小神瓶奖金制度| www.67277.com-彩票九是什么| www.037709.com-福彩过滤软件下载| www.162504.com-101彩票-| www.248278.com-万博彩票手机app| www.519256.com-家彩搜索最新开奖| www.674674.com-财政部互联网彩票| www.94qa.com-英国彩票开奖记录| www.7269.vip-彩虹六号主动式防御| www.062385.com-天天乐彩票-| www.14491.com-七星彩胆拖怎么玩| www.653179.com-海南博彩受益股| www.236101.com-烟台福彩网-| www.029284.com-新2彩票论坛| www.388446.com-塞子彩票-| www.13bp.com-中赢时时彩平台| www.153133.com-分分彩百分百稳赚| www.ij42.com-下载福利彩票| www.473551.com-体彩排列三奖金| www.885479.com-利彩平台合法吗| www.958702.com-皇都彩票安卓版下载| www.qk56.com-中原彩票是不是骗局| www.52485.cc-好彩网可靠吗| www.523338.com-彩票53-| www.623925.com-乐彩lc77-| www.732371.com-彩7彩票-| www.841954.com-关小刀足彩今天| www.957742.com-福彩快三速查表图片| www.ad.com-共享彩票快三| www.ux32.com-武汉福利彩票店转让| www.11pd.com-越南网络时时彩| www.194623.com-请把福彩三的早出来| www.52575.cc-国冠彩票-| www.713402.com-福彩3d杀号专家号| www.843012.com-福利彩票哪年发行的| www.983514.com-福利彩票站能投诉吗| www.fn57.com-全国快三投注| www.11ml.com-奥门48彩-| www.0202.pro-江苏扬中彩票大奖| www.k27.org-3d牛彩网彩搜网| www.vn90.com-内蒙古福彩领奖地址| www.219435.com-福建福彩中心| www.968545.com-福彩6十1中奖规则| www.83953.com-各种天价彩礼| www.504202.com-十选一是什么彩票| www.686033.com-福彩票有精准吗| www.791069.com-好彩蓝莓双爆珠图片| www.875276.com-彩票方下载-| www.991586.com-彩吧vip怎么样| www.27816.cc-时时彩高手论坛| www.017654.com-必发彩票开奖网站| www.085123.com-福彩三地振幅图| www.047.me-98抗洪救免彩票价| www.995800.cc-统计学足彩| www.038025.com-28彩票软件大全| www.425525.com-足彩倍投计划表| www.575894.com-山西福彩双色球开奖| 大赢家彩票平台www.810521.com| www.571669.com-菲律宾快三开奖查询| www.481813.com-福色球彩票开奖结果| www.582603.com-58彩票三分时时彩| www.682719.com-彩票新彩吧网| www.796255.com-彩票店主助手| www.870965.com-彩票网站刷首充| www.947907.com-微信哪里可以买彩票| 博乐彩票www.669773.com| www.k24.tv-免费送彩金游戏网站| www.440050.com-契诃夫彩票人物分析| www.559840.com-体彩大乐透直播在哪| www.91447.com-好彩新加坡免税版| 趣彩网www.qucp2.com| www.684674.com-福彩3d多帮预测| www.670976.com-博悦彩票开了多久| www.802047.com-双色球彩票38期| www.5783.biz-手机即时开彩app| www.376988.com-快频彩开奖时间表| www.529124.com-竞彩发单-| www.629778.com-多彩乐吉林快三| www.733837.com-海南竞彩快3查询| www.856202.com-北京体彩联系电话| www.952204.com-彩票贪污1360| www.cp759.com-河北快三走势图新版| www.ta41.com-彩票一般是几位数| www.14yx.com-福彩3d走试图转版| www.673598.com-台湾福星彩票开奖| www.65611.com-广东好彩发行中心| www.0421.tv-福彩好运快三遗漏值| www.692965.com-彩票电话投注| www.115102.com-福彩投注大厅| www.791745.com-彩票七乐彩中奖规则| www.965212.com-爱乐透彩票门户福彩| www.249939.com-万购彩下载-| www.6990.vip-各种彩票-| www.65167.com-网上彩票输钱经历| www.135233.com-今日好彩1-| www.659134.com-中国福利彩票微信号| www.128364.com-天天彩票免费资料| www.04269.com-国内合法彩票| www.513801.com-3d天天彩报纸| www.610575.com-3个数的是什么彩票| www.693794.com-厦门福利彩票兑奖点| www.794711.com-竞彩足球稳赢模型| www.887371.com-澳客彩票苹果版下载| 福彩www.86267z.com| www.171389.com-彩票昨晚开奖号码| www.937329.com-福中彩票-| www.994235.com-五星彩票平台官网| www.fn9.com-天津时时彩app| www.539257.com-多乐彩票是什么意思| www.842106.com-体彩助推足球发展| www.948441.com-体育彩票公益金用途| www.tg47.com-附近福利彩票投注站| www.138579.com-辉腾团队彩票| www.77rg.com-网恋博彩诈骗怎么办| www.090832.com-福利彩票领奖地点| www.176735.com-快三遗漏报表| www.237337.com-浙江体彩阳光征召| www.291094.com-江苏快三遗漏速查| www.i25.net-百度体彩开奖结果| www.76708.com-优彩彩票怎样充值的| www.937531.com-网站快三押单双大小| www.yo49.com-体彩竞彩哪里可以买| www.27qc.com-491天空彩-|