微信掃碼登錄 ×
vip素材 jquery網(wǎng)絡(luò)營(yíng)銷地圖彈窗顯示聯(lián)系地址代碼
vip素材

jquery網(wǎng)絡(luò)營(yíng)銷地圖彈窗顯示聯(lián)系地址代碼

收藏
jquery網(wǎng)絡(luò)營(yíng)銷地圖彈窗顯示聯(lián)系地址代碼
jquery網(wǎng)絡(luò)營(yíng)銷地圖鼠標(biāo)點(diǎn)擊城市彈窗顯示詳細(xì)地址信息,點(diǎn)擊相應(yīng)的城市彈窗顯示對(duì)應(yīng)內(nèi)容。css js 結(jié)構(gòu)清晰,下載即可使用,

使用方法:

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>總機(jī):0411-90xxxx88</p>
							<p>傳真:0411-09xxxx88</p>
							<p>網(wǎng)址: <a href="#" target="_blank">www.a-ui.cn</a></p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title=""><p class="data-name">沈陽(yáng)分公司</p></a>
							<p>地址: 沈陽(yáng)市國(guó)營(yíng)大道310號(hào)民營(yíng)路旗艦大廈</p>
							<p>總機(jī):024-78787878</p>
							<p>傳真:024-87878787</p>
							<p>網(wǎng)址: <a href="#" target="_blank">516ka.cn</a></p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="遼寧網(wǎng)站建設(shè)">
								<p class="data-name">錦州分公司</p>
							</a>
							<p>地址: 錦州市中央大街二段25號(hào)C座問鼎大廈6樓錦州分公司</p>
							<p>總機(jī):0416-3864222</p>
							<p>傳真:0416-3882060</p>
							<p>
								網(wǎng)址: <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="廣東網(wǎng)站建設(shè)">
								<p class="data-name">廣州分公司</p>
							</a>
							<p>地址: 廣州市越秀區(qū)廣州大道中289號(hào)南方日?qǐng)?bào)</p>
							<p>總機(jī):18688864252</p>
							<p>傳真:020-22387951</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">guangzhou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">深圳分公司</p>
							</a>
							<p>地址: 深圳市南山區(qū)高新技術(shù)產(chǎn)業(yè)園中</p>
							<p>總機(jī):0755-33508008 </p>
							<p>傳真:0755-33508160</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">shenzhen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">深圳第二分公司</p>
							</a>
							<p>地址: 深圳市寶安13區(qū)寶民一路寶安寶通大廈</p>
							<p>總機(jī):075533818028</p>
							<p>傳真:0755-33818058</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">baoan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">東莞分公司</p>
							</a>
							<p>地址: 東莞市莞太大道南城路段15號(hào)絲綢大廈</p>
							<p>總機(jī):0769-23364010</p>
							<p>傳真:0769-23364003</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">dongguan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">東莞第二分公司</p>
							</a>
							<p>地址: 東莞市南城區(qū)莞太路絲綢大廈3樓</p>
							<p>總機(jī):0769-89396708</p>
							<p>傳真:0769-85021520</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">humen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">佛山分公司</p>
							</a>
							<p>地址: 佛山市禪城區(qū)季華五路55號(hào)萬科</p>
							<p>總機(jī):0757-83657888</p>
							<p>傳真:0757-83657798</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">foshan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">中山分公司</p>
							</a>
							<p>地址: 中山市石岐區(qū)安欄路2號(hào)中懇大廈16層</p>
							<p>總機(jī):0760-23886601</p>
							<p>傳真:0760-23881200</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">zhongshan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#n" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">惠州分公司</p>
							</a>
							<p>地址: 惠州市麥地路69號(hào)達(dá)利大廈</p>
							<p>總機(jī):0752-2080100</p>
							<p>傳真:0752-2080202</p>
							<p>
								網(wǎng)址: <a href="#n" target="_blank">huizhou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">汕頭分公司</p>
							</a>
							<p>地址: 汕頭市金環(huán)路時(shí)代廣場(chǎng)西側(cè)潮汕星河大廈</p>
							<p>總機(jī):0754-88483737</p>
							<p>傳真:0754-88483747</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">shantou.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">龍崗分公司</p>
							</a>
							<p>地址: 深圳市龍崗區(qū)龍崗街道龍崗大道號(hào)</p>
							<p>總機(jī):0755-33839928</p>
							<p>傳真:0755-33839900</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">longgang.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">順德分公司</p>
							</a>
							<p>地址: 廣東省佛山市順德區(qū)大良街道辦事處中區(qū)居委會(huì)</p>
							<p>總機(jī):0757-22313658</p>
							<p>傳真:0757-22313765</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">shunde.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">江門分公司</p>
							</a>
							<p>地址: 東華一路61號(hào)金華商業(yè)中心8層825室</p>
							<p>總機(jī):13902586188,0750-3293088</p>
							<p>傳真:0750-3293009</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">jiangmen.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="廣東網(wǎng)站建設(shè)">
								<p class="data-name">珠海分公司</p>
							</a>
							<p>地址: 廣東省珠海市香洲區(qū)明珠南路2158號(hào)華業(yè)大廈</p>
							<p>總機(jī):0756-8580080</p>
							<p>傳真:0756-8580051</p>
							<p>
								網(wǎng)址: <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="山東網(wǎng)站建設(shè)">
								<p class="data-name">青島分公司</p>
							</a>
							<p>地址: 青島市南京路8號(hào)府都大廈14層</p>
							<p>總機(jī):0532-85027637</p>
							<p>傳真:0532-66986374</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">qingdao.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">濟(jì)南分公司</p>
							</a>
							<p>地址: 濟(jì)南市濼源大街68號(hào)玉泉森信大酒店</p>
							<p>總機(jī):0531-55657796</p>
							<p>傳真:0531-55657297</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">jinan.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">煙臺(tái)分公司</p>
							</a>
							<p>地址: 山東省煙臺(tái)市芝罘區(qū)南大街213號(hào)華天大廈</p>
							<p>總機(jī):0535-4080614</p>
							<p>傳真:0535-6634349</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">yantai.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">濟(jì)南第二分公司</p>
							</a>
							<p>地址: 濟(jì)南市順河街66號(hào) 銀座晶都國(guó)際1號(hào)樓6層</p>
							<p>總機(jī):0531-81771588</p>
							<p>傳真:0531-81771515</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">jinan2.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">威海分公司</p>
							</a>
							<p>地址: 威海青島中路附106號(hào)龍海國(guó)際</p>
							<p>總機(jī):0631-5322326</p>
							<p>傳真:0631-5272829</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">weihai.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">淄博分公司</p>
							</a>
							<p>地址: 淄博市張店區(qū)柳泉路156號(hào)</p>
							<p>總機(jī):0533-2360088</p>
							<p>傳真:0533-2360000</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">zibo.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">濰坊分公司</p>
							</a>
							<p>地址: 濰坊市奎文區(qū)鳶飛路與福壽街萬達(dá)廣場(chǎng)B座11樓</p>
							<p>總機(jī):0536-5076688</p>
							<p>傳真:0536-5076606</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">weifang.aui.com </a>
							</p>
						</div>
						<div class="data-branch">
							<a href="#" target="_blank" title="山東網(wǎng)站建設(shè)">
								<p class="data-name">臨沂分公司</p>
							</a>
							<p>地址: 臨沂市蘭山區(qū)金雀山一路開元上城B座1117室</p>
							<p>總機(jī):0539-3217967</p>
							<p>傳真:0539-3217933</p>
							<p>
								網(wǎng)址: <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="云南網(wǎng)站建設(shè)">
								<p class="data-name">昆明分公司</p>
							</a>
							<p>地址: 昆明市青年路389號(hào)志遠(yuǎn)大廈副樓(志遠(yuǎn)新天地)5樓E座</p>
							<p>總機(jī):0871-66349955</p>
							<p>傳真:0871-66098579</p>
							<p>
								網(wǎng)址: <a href="#" target="_blank">kunming.aui.com </a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		if ($(".map-branch")) {
			//默認(rèn)顯示上海
			$(".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> 

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

  • 軟件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
x
×
×

注冊(cè)

QQ注冊(cè) 立即下載 微信注冊(cè) 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了