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.89120120.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.69615.cc-易彩乐邀请码| www.086159.com-福彩终端机押金多少| www.630433.com-下载全民彩票| www.142620.com-聚财神是正规彩票吗| www.377903.com-在线买彩票机| www.096032.com-体育彩票的兑奖期限| www.231577.com-中福彩票平台地址| www.158498.com-博友彩票平台官方网| www.251002.com-中彩在线平台可靠吗| www.727225.com-8号彩票论坛马| www.856365.com-苏州体育彩票兑奖| www.938085.com-彩运无限是黑平台吗| www.995429.com-易彩网安全吗| www.ee47.com-福彩刷流水-| www.579.me-分分彩怎么买大小| www.955.com-平台彩票玩法| www.64730.com-纸箱彩色印刷机械| www.712859.com-七星彩中5个| www.552410.com-第一盛心彩票| www.3212.biz-879彩票平台| www.65422.cc-青海体彩开奖| www.029589.com-新利彩票能控制吗| www.121241.com-起个彩票中奖名字群| www.209356.com-福彩排列五开奖| www.230187.com-福彩快三每天多少期| www.372526.com-无彩色系的颜色| www.529163.com-外围体彩怎么买法| www.75912.com-博牛彩票查询双色球| www.2724.org-快三第一期跨| www.99762.cc-一分快三计划高手| www.672631.com-福彩3d开奘时间| www.836909.com-十一选五彩经网| www.va50.com-河南体彩手机版| www.894447.com-图吧彩票-| 500万彩票www.39500o.com| www.001111.com-华夏彩票坑人| www.796382.com-尊彩网是假的吗| www.883633.com-乐彩网快乐12| www.629.red-彩票直通车能提现么| www.773059.com-彩票中奖计算方法| 500万彩票www.500cd.com| www.hl41.com-彩神争霸uu快3| www.729342.com-彩票中大奖的| www.754323.com-福彩3d北斗预测号| www.238438.com-彩客网彩票客户端| www.322381.com-精英彩票高手论坛| www.367552.com-体彩返奖比例| www.30cm.com-昨天晚上的彩票信息| www.586054.com-玩彩票能赢吗| www.681850.com-手机买彩票什么软件| www.cl79.com-福彩快三论坛| www.7205.vip-七彩娱乐东川麻将| www.to58.com-彩票接口api| www.2389.in-视讯彩不能玩| 澳客网www.okw0.com| www.875588.com-彩神app真的吗| www.956143.com-速盈彩票平台怎么样| www.fj65.com-福彩3d跨度表| www.94lq.com-20彩票的ppt是| www.4868.cn-体彩排列五杀胆定好| www.28639.cc-买竟彩-| www.003801.com-福彩快乐10分概率| 福彩网www.055t.cc| www.000934.com-安徽快三形态彩乐乐| www.4ml.cc-大胖子彩票官网| www.93hp.com-彩票怎么才算违法| www.526301.com-万国彩票-| www.665630.com-七乐彩随机选号工具| www.672010.com-大奖网彩票下载安装| www.108210.com-天娱彩票是真的假的| www.258904.cc-竞彩大客户哪里找| www.165659.com-彩票优化筛选机| www.8735.xyz-威信彩票官网| www.55536.com-3d水彩画-| www.97983.com-新加坡福彩网站| www.679265.com-问题彩民案例| www.965631.com-分分快三猜一个好| www.qr72.com-福彩文化理念| www.678912.cc-足彩能在网上买吗| www.q41.net-网罗爱彩双色球| www.54sd.com-彩票投注单打印软件| www.024715.com-体彩竞彩5808万| www.634114.com-开封七彩华风幼儿园| www.868673.com-甘肃省快三走势图| www.685888.com-一定牛快三豹子预测| www.772704.com-网络彩票帮忙投注| www.520567.com-福彩快三限号规定| www.650128.com-博彩无法下分| www.770206.com-好彩网可以赚钱吗| www.816633.com-快三豹子通选奖金| www.cai9777.com河北快三统计图表| www.604690.com-齐发网彩票-| www.588300.com-彩库之家香港高手坛| www.257356.com-彩票360购彩大厅| www.rc94.com-61彩票-| www.61xo.com-彩票软文素材| www.0223.me-彩报3d大花猫| www.9331.xyz-诺基亚星际彩球游戏| www.57my.com-梦见中奖彩票丢了| www.476688.com-六福彩票免费下载| www.561324.com-极速时时彩群| www.034666.com-花生彩票能玩吗| www.062421.com-166彩票官网| www.uh03.com-彩神vi邀请码| www.393283.com-秋天风景画彩铅画| www.1204.vip-彩票号码7位数| www.78575.com-3d字谜双彩论| www.289786.com-彩票改20分钟开奖| www.907979.com-七星彩中了五个号没| www.974943.com-棒棒彩票下载| www.mt6.com-湖北快三预测分析| www.889.mobi-彩九九iphone| www.86987.cc-复式福彩中奖金额表| www.re73.com-怎么计算分分时时彩| www.417077.com-竞彩足什么时间开奖| www.578863.com-彩票店内照片| www.004243.com-乐购彩票快3| www.049234.com-河北风彩排列5开奖| www.412795.com-足彩奖金计算器澳客| www.306.live-机选5注彩票| www.3964.org-东北结婚彩礼给谁| www.04770.com-足彩怎么买最合理| www.967426.com-在网上能买彩票吗| www.a98.wang-十字彩犯法吗| www.55iz.com-东莞市体育彩票中心| www.8234.pw-莱利pk彩票-| www.399885.com-彩票快乐十分怎么买| www.281000.com-天津时时彩官方| www.363255.com-羽泉彩虹翻唱韩国| www.431462.com-时时彩四星手机缩水| www.03es.com-彩票k线分析知识| www.67ql.com-2017体彩业务员| www.440825.com-手机好彩客2017| www.577754.com-吉林快三福彩快三| www.674687.com-英国官方彩票有哪些| www.741198.com-体彩跟双色球的区别| www.796863.com-黑彩怎么举报| www.870926.com-星彩网3d论坛| www.3425.live-800彩-| www.099621.com-赢彩网靠谱吗| www.379243.com-潢川彩票中奖| www.986575.com-4码彩票-| www.bs50.com-彩500app-| www.ra24.com-智胜彩票-| www.34439.com-下载安徽福彩| www.862536.com-澳客网彩票预测专家| www.373458.com-北京福彩彩票网| www.5664.pw-看图买生肖彩票| www.93go.com-078彩票安全吗| www.jl97.com-骗感情买彩票| www.611811.com-长春彩溢关门了吗| www.680988.com-彩票巴巴注册| www.752665.com-d9彩票网站靠谱吗| www.814027.com-高频彩票未来趋势| www.916152.com-体彩怎么加盟费多少| www.986156.com-12选五浙江爱彩乐| www.cp7719.com-快三奖号怎么出来的| www.pc59.com-河北十一选5爱彩| www.4600.cm-百盈彩票快三app| www.11714.com-被骗博彩-| www.5420.vip-四川彩票有人中奖| www.00669.cc-过年体彩营业时间| www.76621.cc-陈赫中彩票的电视剧| www.202997.com-老谢说彩公众号|