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.sino-agri-tj.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天

知道了
1分快三 www.658876.com-红牛彩票首页| www.675038.com-汇丰彩票登陆| www.wm78.com-掌上七天彩app| www.6330.top-三彩服饰春装| www.37947.com-中彩彩票万人牛牛| www.6305.org-3d乐彩网高低图| www.60115.com-2019体彩新规| www.078032.com-pk彩票被骗-| www.cai7944.com河北快三智能推荐号| www.041555.com-美国彩票史十大巨奖| www.294338.com-福彩图谜总汇牛彩| www.022097.com-网络彩票可以玩吗| www.500951.com-希腊5分彩走势| www.566885.com-好彩堂跑狗论坛| www.88654.cc-人人中彩票手机下载| www.185234.com-彩59app-| www.288044.com-万豪福彩苹果版下载| www.713250.com-彩票快3qq群| www.831125.com-盛兴开奖彩票| www.916223.com-如何开私彩平台| www.988739.com-快三最笨买法| www.xs00.com-福彩3d35期-| www.31vr.com-星期五体彩开什么| www.311689.com-福彩十选五玩法| www.431848.com-彩票可以买多少钱| www.757089.com-下载997彩票软件| www.78921.cc-分分快三福利彩票| www.42091.com-彩票什么样-| www.306051.com-彩票注册送礼金| www.520521.cc-2018年彩票销量| www.269371.com-三分彩是什么| www.457122.com-中国中彩票的人| www.872554.com-湖南福彩下载安装| www.iw08.com-足彩串关计算器| www.65fm.com-做梦找牛是什么彩码| www.1fs.cc-超神时时彩在线计划| www.2622.com-彩票聚合官方端口| www.9072.org-海南七星彩包头尾| www.911599.com-全民计划彩票| www.436497.com-山西体育彩票中心| www.672985.com-七星彩中奖7注| www.606089.com-买彩票号码-| www.231184.com-时时彩平台改号| www.392652.com-体彩今天出什么码| www.655670.com-足球彩票储备分析师| www.828633.com-英国彩票不交税吗| www.916065.com-莆田体育彩票站电话| www.979320.com-苏式彩画-| www.te9.cc-彩种大厅360| www.766668.cc-购彩大厅快三| www.7773.win-网上彩票的心得体会| www.586160.com-彩票121开奖| www.702332.com-爱投网买彩票合法吗| www.822124.com-七星彩18143期| www.15cm.com-彩票店对联-| www.8939.biz-易彩网可信吗| www.559327.com-福彩3d六码绝杀| www.665420.com-体彩金七宝下载网址| www.736944.com-上海体彩开奖结果| www.810605.com-cp彩票36·cm| www.897645.com-易彩2.0二维码| www.978704.com-雷诺好彩1预测怎样| www.db41.com-快三分析软件app| www.xe36.com-博彩展-| www.43uw.com-挂彩了什么意思| www.91ey.com-玖富时时彩-| www.3245.vip-时时彩胆码运用技巧| www.148121.com-app购彩大庁| www.349022.com-内蒙快三选号软件| www.055813.com-一分快三外挂使用| www.082611.com-分分快三有人赢吗| www.55657.com-水彩创意画-| www.087171.com-五福彩票手机官网| www.574674.com-惠彩乐购-| www.201068.com-七星彩公式计算| www.64008.com-兴华彩票软件| www.2375.shop-彩票134-| www.97an.com-六福彩合法吗| www.695741.com-四亿彩票注册网址| www.324022.com-马来西亚做彩票客服| www.329509.com-思乐彩票机-| www.871447.com-桂平彩票中了2亿元| www.075575.com-彩票达人论坛| www.8590.org-体彩排列三胆| www.16ol.com-咔咔彩票-| www.796482.com-快彩网合法吗| www.874870.com-小店宝彩票正规吗| www.241105.com-牛彩网站-| www.590515.com-南粤风彩好彩一| www.fe82.com-五分钟一开奖的彩票| www.507152.com-非凡彩票走势图表| www.14ek.com-99彩登陆平台登录| www.757518.com-福乐彩是正规的吗| www.699268.com-北京时时彩开奖官网| www.19ae.com-大乐彩开奖结果| www.917155.com-88彩票是不是合法| www.09271.com-发彩票短信-| www.589558.com-明天篮彩分析预测| www.691168.com-吉林快三投注软件| www.872712.com-遵义彩票店转让| www.410989.com-中国足球竟彩| www.02ji.com-盈盈彩票手机版下载| www.364160.com-网购彩票2018| www.qh53.com-好彩香烟怎么订购| www.829.cc-体彩刮刮乐20视频| www.30zu.com-彩虹搭建主站| www.3984.biz-澳门十二福利彩| www.17539.cc-中国彩软件下载| www.2099.cn-南京体彩店转让| www.4504.win-竞彩任九玩法| www.32251.com-进口彩妆加盟| www.003526.com-下载中国福彩票| www.305397.com-福利彩票怎么购买| www.507965.com-福彩三d2元网| www.569367.com-皇家科技彩库宝典| www.627666.cc-分分彩后一五码技巧| www.93ue.com-彩色一寸照片| www.6927.cc-最贵的七彩鱼图片| www.38242.com-彩神v1-| www.6816.com-彩票三地图迷| www.17772.com-足球彩票如何跟单| www.x76.cc-体育彩票大乐透奖金| www.256332.com-中彩彩票软件| www.029183.com-大乐透购彩-| www.433438.com-彩票一等奖中奖地区| www.886028.com-中国五洲彩票| www.gl06.com-福彩快三中了多少钱| www.070966.com-七乐彩中奖图片| www.223358.com-快三分析知识| www.667937.com-百乐城彩票-| www.878234.com-牛彩网3d图谜汇总| www.959858.com-五亿彩票官方网| 500彩票www.50788k.com| www.914849.com-地下网络黑彩| www.hn90.com-快三高手技巧心得| www.237307.com-福彩3d的玩法| www.325788.com-新浪手机网彩票| www.393208.com-五个号的彩票是什么| www.517202.com-双色球直播中彩视频| www.317565.com-彩票查询排列五今天| www.676907.com-进口彩妆代理| www.760742.com-好彩三遗漏走势| www.818127.com-竞彩必发新浪| www.874813.com-7k彩票71677| www.951318.com-足彩直播500| www.995436.com-竞彩盈亏指数| www.bp26.com-福彩3d缩水过滤器| www.vy24.com-怎么在手机上玩快三| www.25iz.com-华彩音乐术语| www.271.cm-美国彩票网站app| www.33la.com-家彩网排三杀码| www.tp02.com-五分彩骗局多长时间| www.20aw.com-350彩票正规不| www.l12.xyz-彩票app代理平台| www.352871.com-手机黑彩下载| www.317983.com-彩票网站建设柏| www.192976.com-派彩电子走势图| www.696317.com-老重时时彩走势图片| www.029627.com-xpj国际博彩| www.532309.com-临沂市体育彩票中心| www.545144.com-武汉福彩店转让信息| www.414194.com-精彩意思是-| www.11gb.com-七乐彩五分区走势图| www.668754.com-时时彩登陆-|