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.sjwxzsw.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.ct45.com-网上私彩-| www.2hg.cc-加盟体育彩票赚钱吗| www.65hv.com-大乐透彩票专家预测| www.344780.com-最新福彩票中奖信息| www.493002.com-幸运彩票送18| www.549969.com-网购足彩-| www.318678.com-江西福彩助手正规嘛| www.066898.com-彩宝贝3d杀号定胆| www.932411.com-时时彩个位大小判断| www.ap26.com-基诺型彩票规律| www.11uo.com-天津彩-| www.625446.com-鑫彩网_网址| www.960804.com-358彩票-| www.4958.cn-彩猫彩票是黑平台吗| www.637968.com-色彩构成作业| www.813511.com-宁夏福利彩票微信群| www.940072.com-休彩排列三试机号| www.cp576.com-福彩快三走势图河北| www.642251.com-汪彩预测-| www.722361.com-华阳彩票还能买吗| www.809363.com-彩经网印尼5分彩| www.882706.com-易彩兼职买彩票| www.959166.com-御彩轩ios-| 博友彩www.533786.com| www.kl31.com-新浪彩票电脑版| www.l27.net-棋牌彩票投注网站| www.oz09.com-宁夏银川福彩中心| www.0dm.cc-苹果手机彩票| www.56mn.com-福利彩票站在哪申请| www.026909.com-英国5分彩开彩结果| www.109021.com-七彩鱼最佳水温| www.180081.cc-快三万能二码组合| www.93928.cc-足彩单关-| www.055813.com-一分快三外挂使用| www.711276.com-700彩票骗局揭秘| www.801908.com-精彩视频app| www.tk54.com-河南福彩快3| www.390046.com-723彩票下载安装| www.84le.com-1288彩网ios| www.6881.cn-14胜负彩玩法| www.44998.cc-国家体彩返佣金| www.046650.com-福利彩票店装修图片| www.84465.com-彩钢板执行标准| www.108938.com-查彩票中奖的软件| www.069055.com-幸运5分彩可信吗| www.237571.com-幸运快三走势图软件| www.358504.com-苏州福彩网福彩公告| www.9628.in-七彩色头发-| www.69586.com-彩38源码-| www.110583.com-彩九的软件下载| www.217826.com-吉林快三手机版下载| www.505979.com-体彩中心案-| www.921628.com-龙虎和彩票软件| www.012411.com-彩票图谜牛彩网| www.2609.pw-河北十选五爱乐彩| www.02373.com-3d彩神通今日快报| www.186517.com-上海快3爱彩乐| www.86tf.com-7乐彩走势-| www.37375.cc-以前金山改成酷彩吧| www.93385.cc-彩色纸箱印刷生产| www.772981.com-最新送彩金-| www.865038.com-新华彩票是正规的吗| www.953889.com-360足彩胜负彩| PK彩票www.www.23040.com| www.33991.cc-彩票培训师证书| www.92237.com-三地彩图-| www.528906.com-竞彩店不能再申请了| www.6080.in-彩票黑色纸张| www.55781.com-七乐彩复式怎么玩| www.019449.com-六盘水彩票中奖情况| www.090980.com-广西南宁市福彩中心| www.7819.net-星彩新星彩免费资料| www.45277.com-长春彩溢健康会所| www.574781.com-福利彩世界平台登陆| www.819810.com-网络彩票怎么玩| www.897769.com-高频彩开奖作弊不| www.960485.com-近期泰安彩票中奖| 8816彩票www.8816r.com| www.ey71.com-新彊时时彩助手| www.649758.com-888彩票下载中心| www.920608.com-幸运快三技巧顺口溜| www.bp23.com-内蒙快三牛-| www.12ca.com-梦到彩虹周公解梦| www.5272.top-彩票自动下单源码| www.61025.com-038彩票几年历史| 金冠彩票www.49956c.com| www.873494.com-福彩双色球购彩大厅| www.814367.com-邯郸银行彩票案| www.561053.com-七乐彩助手-| www.272582.com-今日新鲜事彩票查询| www.086289.com-彩票彩客app| www.162964.com-彩票帮投陷阱| www.122277.com-北京28彩票怎么样| www.wh99.com-51中彩彩票软件| www.243618.com-下载玩彩票app| www.298827.com-cm彩迷-| www.704118.com-三d福利彩票预测网| www.029127.com-彩票对压怎么玩| www.367890.com-c588彩票官网| www.63378.com-19050足彩预测| www.8588.live-河内彩票开奖查询| www.266626.com-重庆快三真的吗| www.76220.com-文成县福利彩票| www.057850.com-福建福州快三查询| www.232628.com-彩票号码预测| www.332943.com-福彩快3玩法规则| www.444100.cc-福彩3d和跨-| www.29773.com-山东福彩官方app| www.049901.com-中科公益彩票靠谱吗| www.159654.com-安微福彩快三走势图| www.242618.com-中彩网双色球分布图| www.267975.com-彩圣福彩3d字谜| www.418416.com-快三落是真的吗| www.51193.com-中博系统彩票平台| www.053278.com-有没有快三群| www.666719.com-星乐彩充值安全吗| www.966473.com-全球彩彩票是什么| www.71588.cc-福彩快三统计| www.tl53.com-粤淘彩票快3大发| www.087673.com-福建娱乐彩票论坛| www.184918.com-江苏快三形态走势牛| www.204972.com-陕西福彩电话号码| www.340160.com-彩票追长龙-| www.410422.com-七彩球玩具-| www.507763.com-福彩三d往期试机号| www.566159.com-58cc赢彩彩票| www.633204.com-45cc彩票-| www.688828.com-人人快三开奖号码| www.934320.com-智博彩票是真的吗| www.984477.com-财神彩票犯法吗| www.9bc.com-彩宝彩票下载苹果版| www.254622.com-福彩3d字谜.| www.486019.com-福彩247丹东图谜| www.540797.com-苹果手机正规彩票| www.589449.com-体育彩票掌游彩| www.652094.com-葡京彩票集团官网| www.cp8133.com-易彩快3有没有规律| www.wz52.cc-福彩3d谜语今天| www.021332.com-太原体彩店-| www.134433.com-福福彩3d走势图| www.wf0.com-长春体彩快3走势图| www.795901.com-至尊彩注册-| www.687762.com-今日彩票x-| www.751393.com-时时彩余额修改器| 幸运彩票www.936399.com| www.477336.com-开一个彩票店挣钱吗| www.49187.com-彩娃彩票平台代理| www.122580.com-53彩票注册-| www.722795.com-168彩票注册网| www.fk70.com-福彩app注册| www.75qu.com-彩票综合预测| www.844061.com-千亿彩票软件| www.ig89.com-快三大小单双买法| www.111059.com-赌彩票总是输| www.223565.com-500彩票资讯| www.323425.com-七星彩中头尾多少钱| www.470067.com-足彩也是赌博吗| www.586997.com-连红彩票手机客户端| www.758455.com-万鸿彩店下载| www.894923.com-福彩5分快三咋玩| www.936108.com-快三10次倍投计划| 顶尖彩票www.135169.com| www.947105.com-百度彩票开奖信息| 彩客博www.8667y.com|