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.jcjdgy.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.441100.cc-炫彩图片带字| www.519223.com-乐盈彩票进不去了| www.377570.com-合肥福利彩票开店| www.661029.com-捕鱼送彩金可提现| www.591609.com-永利彩票靠谱吗| www.nq44.com-福彩怎么选号| www.678614.com-安卓精英彩票| www.5334.in-彩票天下233c| www.0765.in-七星彩粤海局王奖表| www.779827.com-买彩票坚持守号| www.911.hk-念什么咒语能中彩票| www.9388.mobi-双色球彩票真伪查询| www.733259.com-彩票被洗衣机洗烂了| www.821126.com-吉林快三软件自动| www.917186.com-风景彩铅画教程| www.982398.com-互娱彩票交流群| www.ic2.com-百姓彩票网-| www.uc95.com-彩神安徽快3| www.36872.cc-干里马体彩预测| www.go66.cc-新疆喜乐彩走势图| www.671885.com-彩票刮刮乐促销方案| www.594991.com-奇妙时时彩k线软件| www.781460.com-六六微彩-| www.482567.com-支付宝扫码兑彩票| www.592886.com-七彩阳光背面示范| www.875680.com-拉人玩彩票聊天方式| www.982423.com-蜂巢时时彩计划网页| www.ic59.com-彩票太假-| www.09ax.com-河内彩票-| www.594.tv-徐文轩彩票预测网站| www.617245.com-七乐彩今晚开奖号码| www.706830.com-87彩店官方-| www.787370.com-雪缘网足彩比分直播| www.858303.com-即是开彩-| www.917159.com-用彩铅画星空| www.973414.com-彩虹儿歌歌词| www.cai797.cc-福彩快三是什么东西| www.kk17.com-盛典彩票快幸运快3| www.566689.com-凯发彩票邀请码| www.631953.com-优彩彩票能提现不| www.698617.com-怎么算快三-| www.782203.com-香港机密一肖彩经图| www.854080.com-极速快三开挂软件| www.913146.com-好彩客中了十万不给| www.971294.com-快三最新玩法| 瑞彩网www.809215.com| www.734567.cc-风釆和风彩-| www.372387.com-歌曲彩虹羽泉歌词| www.717028.com-彩铅手绘超写实| www.615779.com-赢彩计划软件手机版| www.310505.com-湖南体彩网论坛| www.0245.net-众乐彩票是真是假| www.930466.com-彩票的种类和价格| 万利www.32123g.com| www.528660.com-陕西有快三吗| www.68195.cc-体育彩票竞彩店转让| www.831596.com-日本7亿彩票怎么买| www.931310.com-七星彩奖金分配| www.693088.cc-买彩票软件排行榜| www.8790.vip-爱买彩票-| www.600096.cc-最低充1元彩票| www.77nz.com-福彩3d视频-| www.408090.com-买七星彩有什么妙招| www.507967.com-福利彩票3d百万网| www.308075.com-网上买彩票该如何购| www.669211.com-去美国旅游中彩票| www.288789.com-彩票推广术语| www.756218.com-凤凰彩票时时彩登入| www.mf6.com-河北快三预测一定牛| www.9zd.cc-七彩祥云是什么征兆| www.924925.com-手机怎么购买彩票| www.984732.com-福利彩靠谱吗| www.cp9658.com-福彩快3彩票站提成| www.nu24.com-彩票坊买彩票正规吗| www.p65.org-万豪彩票手机版| www.41ro.com-七星彩票结果| www.300.blue-高频彩彩票如何盈利| www.32yg.com-一定牛彩票足球| 500彩票网www.611306.com| www.08nh.com-彩民社区47849| www.414349.com-什么叫出彩-| www.229923.com-新彩票走势网| www.760927.com-广东好彩1app| www.860692.com-8亿彩最新版本安装| www.959893.com-1305彩票下载| www.cp399.cc-博彩app-| www.ss28.cc-时时彩最精准9码| www.42yw.com-晓风彩票软件| www.8601.top-电视剧彩票-| www.672538.com-竞彩篮球倍投| www.740745.cc-澳门有几家博彩公司| www.511170.com-彩虹周杰伦写给谁| www.901876.com-昨天体彩开奖号码是| www.162517.com-江苏e球彩技巧有吗| www.971946.com-创彩网是黑平台吗| www.cp2466.com-福彩了冖开冼结果| www.td20.com-快三的分解动作| www.331194.com-彩票趋势图怎么判断| www.405303.com-嘉兴彩票中奖| www.497563.com-pk彩官网-| www.75366.cc-彩票能发财-| www.84rl.com-玩时时彩真能赚钱吗| www.224360.com-快三中奖概率怎么算| www.551113.cc-快三开奖软件苹果| www.15ho.com-呼之欲出e众彩平台| www.947429.com-彩吧论坛论坛首页一| 博乐彩票www.665881.com| www.ky02.com-百盈快三预测| www.11rj.com-彩色的翅膀主要内容| www.76fk.com-七乐彩中六个多少钱| www.431985.com-今天福彩怪字第二版| www.597101.com-1分钟快三平台| www.702219.com-足彩胜平负比分| www.826422.com-体育彩票刮刮乐种类| www.930943.com-马来西亚福利南洋彩| 好运彩吧www.025727.com| www.967964.com-网上微信什么彩票群| 大赢家彩票www.590801.com| www.927886.com-俄罗斯彩票开奖结果| www.984627.com-广州福彩站主之家| www.gk0.cc-快三之家破解器| www.65ir.com-大乐透一等奖彩票图| www.86iw.com-广州福彩中心招聘| www.221603.com-打彩一天赚几万| www.371783.com-彩票摇号是随机的吗| www.708709.com-体彩足球-| www.299706.com-123彩彩票网站| www.365687.cc-体彩排列五什么好| www.cp9000.cc-手机彩票app| www.216622.com-跟着老师买彩票| www.286916.com-福彩交流群公告| www.427117.com-易彩国际平台登录| www.509309.com-菜神网彩票网| www.072759.com-综艺福彩官网| www.143879.com-竟彩足球胜平负| www.231345.com-江苏快三计划网大小| www.295019.com-5分彩官方网站| www.180004.com-快三秒奶茶-| www.260313.com-买彩票怎么赚钱选号| www.331926.com-大发快三刷流水方法| www.178509.com-内蒙快三跨度走势图| www.360345.com-彩票破解官方版| www.496522.com-体彩排列3和值遗漏| www.3336.cc-日本全彩本子| www.13369.cc-竞彩网混合过关| www.73xd.com-福彩3b天气网| www.065385.com-必赢彩票案子结案没| www.685219.com-119彩票平台| www.778278.com-福利彩票七乐彩规则| www.875403.com-鼓励彩民的话| www.966485.com-皇家彩世界害人不浅| www.cp31.com-江西多乐彩今日开奖| www.665215.com-七乐彩历史比器| www.749987.com-全民彩票的规律| 9928彩票www.9928n.com| www.530531.com-重庆时时彩杀前三号| www.610881.com-足彩竞彩中奖规则| www.686506.com-澳彩大盘升盘| www.803732.com-牛彩三d图谜总汇九| www.885614.com-福彩三地开奖走势图| www.964501.com-3d彩票开奖直播| www.cp5115.com-江苏快三玩法有诀巧| www.ot79.com-360彩票走势| www.52989.com-时时彩慢慢回血|