jQuery鼠标经过地图城市标注显示详细信息



155 618 207



特效描述:鼠标经过 地图城市标注 显示详细信息,

代码结构

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

加群请备注:从官网了解到