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.xhkyy.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.673253.com-彩票专家网345| www.290551.com-内蒙古快三和尾走势| www.357376.com-彩票怎么才知道中奖| www.092256.com-体彩36选七-| www.l65.cc-彩神争8有人赚钱吗| www.ej35.com-网上购彩平台| www.37ku.com-彩票平台招租| www.021131.com-体育彩票玩儿法| www.537078.com-彩字开头的网名| www.757332.com-彩票长龙一般何时| www.cp6331.com-中国体彩网官网首页| www.5189.me-四川福利彩票12| www.88463.com-518彩官网开户| www.477733.com-彩神通有手机版吗| www.393875.com-人头像色彩设计| www.092081.com-牛牛彩票网骗局| www.1721.wang-大发快三倍投策| www.771519.com-时时彩买法漏洞| www.958461.com-有5分钟开的彩票吗| www.dt89.com-重庆时时彩私彩漏洞| www.971271.com-旺彩是正规网站么| www.mr9.cc-彩票预测软件下载| www.tt40.com-购买足彩-| www.205808.com-彩票计划软件哪个好| www.031023.com-相亲加彩票诈骗| www.29792.cc-天行健福彩专家| www.81173.cc-双数开彩是什么肖| www.055661.com-买哪种彩票容易中奖| www.524747.com-凯利公式用于彩票| www.617556.com-用户登录中彩在线| www.739548.com-三地和值中彩网| www.954093.com-深圳市庆典彩烟| www.012.cm-亿彩国际-| www.83892.cc-福利彩票七彩乐玩法| 乐彩网www.3416b.com| www.11649.com-大发快三注册| www.48947.com-时时彩购买软件| www.901615.com-今晚福彩3d开奖号| www.273815.com-上海快三预测一定牛| www.865183.com-华彩论坛-| 惠民彩票www.hm7288.com| www.345182.cc-奥客彩网竞彩足球| www.zv0.cc-厦门快三开奖结果| www.pe12.com-大公快三秒订餐电话| www.057659.com-澳门六会彩开奖日期| www.314755.com-七彩西游记-| www.380655.com-江苏体彩大乐透论坛| www.192576.com-七星彩精准专家预测| www.0120.com-中彩网3d字谜汇总| www.54655.cc-微信送99彩金| www.tc92.com-最新彩票跨度规律| www.018195.com-福彩福彩字谜图谜| www.60ll.com-福彩3b预测总汇| www.2808.wang-团彩网可信吗| www.986674.com-校长福彩预测| www.dw24.com-凤彩app-| www.b64.me-三分时时彩时间| www.62of.com-彩票号过滤-| www.1647.com-8828彩票网页| www.542233.com-购彩平台信誉好的| www.095710.com-福彩3d的彩吧论坛| www.196326.com-彩票高手-| www.04mp.com-古风彩铅桃花画法| www.571553.com-即时开彩2015| www.960044.com-一分快三长龙记录| www.fl22.com-各种釉彩大瓶拍卖| www.60eg.com-农村结婚彩礼图片| www.077102.com-湖南体彩种类及玩法| www.272749.com-pc彩票骗局-| www.551358.com-四场进球彩合买投注| www.987675.com-3d彩报彩乐迷| www.841692.com-福建体彩有几种玩法| www.44829.com-胆拖投注彩票开奖| www.750895.com-中福彩票登陆| www.890015.com-百策富论坛彩金| www.993311.com-彩票计划能赚钱吗| www.ju16.com-海南七星彩4位玩法| www.48bg.com-淼鑫彩票网页版| www.180258.com-广西快三遗漏| www.113051.com-官方彩31-| www.206690.com-好运来彩票网app| www.387101.com-球球大作战七彩月饼| www.790715.com-福利彩票3d选号法| www.974806.com-体彩大乐透购买技巧| www.ma98.com-广西福彩快3走势| www.081016.com-快三怎么投-| www.169312.com-安徽快三预测与推荐| www.481765.com-今日体彩排三字谜| www.361396.com-3d体彩中奖号| www.433277.com-凯里开发区彩票| www.30nq.com-福利福彩app| www.400416.com-点击彩平台怎么样| www.502096.com-投彩怎么玩-| www.560083.com-澳门快三是什么样的| www.301644.com-快三任一选号| www.208817.com-老谢说彩的头条主页| www.108530.com-最新彩票软件| www.204597.com-5分快三-| www.301745.com-上海快三官方版| www.388069.com-华章溢彩-| www.7218.cn-怎么安装彩35| www.89517.com-新生彩票手机登录| www.02605.com-福彩网络购买| www.96467.com-购乐彩票是正规的吗| www.154545.com-彩票平台怎样赚钱| www.74500.com-七乐彩中7加1| www.565700.com-彩票龙虎号怎么区别| www.655696.com-彩票单式生成| www.762915.com-天津快乐十分爱乐彩| www.3434.vip-诺亚彩票真实性| www.090455.com-买重庆时时彩app| www.319365.cc-福彩三d和值走试图| www.444830.com-刮刮彩票透视| www.535444.com-彩票生肖动物| www.606870.com-彩票犯法么-| www.128057.com-雨后彩虹头像| www.835766.com-彩票中奖在哪里兑奖| www.fy54.com-彩53-| www.42gs.com-ios12原彩修复| www.03823.com-该不该买彩票| www.055342.com-我想进吉林快三群| www.135069.com-五彩缤纷香烟| www.cp5366.com-湖北快三专家预测| www.yp47.com-大马开彩成绩| www.s45.in-彩金申请-| www.29287.cc-彩虹的约定伴奏| www.69981.com-网上时时彩怎么玩的| www.269631.com-彩票123彩票| www.728803.com-福彩3d南方双彩| www.876952.com-合买体彩-| 91彩票网www.912453.com| www.429739.com-南京丰彩漆-| www.710108.com-什么是套彩-| www.877313.com-七乐彩购买官网| www.392526.com-搜狐彩票电-| www.534799.com-本期六开彩开奖结果| www.55248.cc-幻彩曲棍球1下载| www.27jv.com-约彩彩票投不了注| www.3384.vip-福彩3d天天彩报二| www.075327.com-老9彩票-| www.rw8.cc-河南跑马彩-| www.505631.com-88期福彩中奖号码| www.5456.win-快三大小倍投必死| www.964293.com-七星彩走势图规律| www.zc05.cc-甘肃兰州彩票| www.218338.com-网上福彩快三违法吗| www.2811.xyz-红红火火彩票| www.263276.com-cp彩票骗人-| www.381136.com-七乐彩几点出奖| www.567049.com-九千万彩票账户| www.255608.com-七乐彩拖胆玩法介绍| www.31096.com-彩票三十万领奖| www.234051.com-彩神v大发快3| www.11uh.com-牛彩是真的还是假的| www.db77.com-四亿彩票注册送41| www.44429.com-超兴彩票是骗人的吗| www.yu92.com-神圣彩票首页| www.625909.com-双色球彩宝贝预测| www.730569.com-哪个彩票软件靠谱| www.eu55.com-时时彩苹果官方版| www.77xl.com-快乐六分彩-| www.041777.com-彩票最长的龙有几个| www.766431.com-华夏鑫彩app下载| www.897007.com-美国兆彩-|