jQuery鼠標經過地圖城市標注顯示詳細信息



162 645 216



特效描述:鼠標經過 地圖城市標注 顯示詳細信息,

代碼結構

1. 引入CSS

<link href="css/map.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

<div class="contents" style="width:1100px; margin:0 auto;">
    <div class="b_map">
        <ul id="m_btn" class="e_map_tags">
            <li class="m_beijing centers" data-type="chengdu">chengdu</li>
            <li class="m_shanghai" data-type="shanghai">shangahi</li>
            <li class="m_hangzhou" data-type="hangzhou">guangzhou</li>
        </ul>
        <div class="e_map_info">
            <div class="m_content m_beijing hide" data-panel="beijing" style="display:block;" >
                  <div class="m_content_side">
					   <a href="javascript:;" class="m_left"><img src="img/arraw-left.png" /></a>
                   <a href="javascript:;" class="m_right"><img src="img/arraw-right.png" /></a>
                  </div>
                  <p style="text-align:center; font-size:20px; padding-bottom:20px;">chengdu</p>
                  <div><img src="img/chengdu.jpg" /></div>
                  <p style="text-align:justify; width:270px;">Chengdu is the Chengdu is the capital of Sichuan and a major city in western China. It is one of the most important economic, transportation, and communication centers in western China...Chengdu is the capital of Sichuan and a major city in western China. It is one of the </p>
            </div>
            <div class="m_content m_shanghai hide" data-panel="shanghai">
                 <div class="m_content_side">
                   <a href="javascript:;" class="m_left"><img src="img/arraw-left.png" /></a>
                   <a href="javascript:;" class="m_right"><img src="img/arraw-right.png" /></a>
                 </div>
                 <p style="text-align:center; font-size:20px; padding-bottom:20px;">Shanghai</p>
                  <div><img src="img/shanghai.jpg" /></div>
                  <p style="text-align:justify; width:270px;">Chengdu is the Chengdu is the capital of Sichuan and a major city in western China. It is one of the most important economic, transportation, and communication centers in western China...Chengdu is the capital of Sichuan and a major city in western China. It is one of the </p>
            </div>
            <div class="m_content m_hangzhou hide" data-panel="hangzhou">
                <div class="m_content_side">
                   <a href="javascript:;" class="m_left"><img src="img/arraw-left.png" /></a>
                   <a href="javascript:;" class="m_right"><img src="img/arraw-right.png" /></a>
                </div>
                <p style="text-align:center; font-size:20px; padding-bottom:20px;">Guangzhou</p>
                  <div><img src="img/guangzhou.jpg" /></div>
                  <p style="text-align:justify; width:270px;">Chengdu is the Chengdu is the capital of Sichuan and a major city in western China. It is one of the most important economic, transportation, and communication centers in western China...Chengdu is the capital of Sichuan and a major city in western China. It is one of the </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$(".e_map_tags li").mouseover(function(){
		$(this).addClass("centers").siblings("li").removeClass("centers");
		var index=$(this).index();
		$(".m_content").eq(index).show().siblings(".m_content").hide();
	});
	//左右切換
	//點擊左箭頭
	$(".m_left").click(function(){
		//獲取當前左切換 父親的 index
		var sideindexL=$(this).parents(".m_content").index();
		//全部隱藏
		$(".m_content").hide();
		//父親的上一個顯示
		$(this).parents(".m_content").prev(".m_content").fadeIn();
		//地圖對應index添加默認樣式
		$(".e_map_tags li").eq(sideindexL-1).addClass("centers").siblings("li").removeClass("centers");
		//當左切換為第一個時候  第一個顯示
		if(sideindexL==0){
			$(".m_content:first").show();
			alert("前面沒有了!")
			$(".e_map_tags li").eq(0).addClass("centers").siblings("li").removeClass("centers");
		}
	});
	//點擊右箭頭
	$(".m_right").click(function(){
	     //獲取頁面全部.m_content 的數量
		var sideindexR=$(this).parents(".m_content").index();
		$(".m_content").hide();
		$(this).parents(".m_content").next(".m_content").fadeIn();
		$(".e_map_tags li").eq(sideindexR+1).addClass("centers").siblings("li").removeClass("centers");
		if(sideindexR==2){//這里的數字 是你地圖的個數減去1
			$(".m_content:last").show();
			alert("最后一個了!")
			$(".e_map_tags li").eq(sidelenAll).addClass("centers").siblings("li").removeClass("centers");
		}
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動星星打分 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 帶簡介的焦點圖 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表