注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery城市地图鼠标经过标注显示文字介绍代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-02-16
jQuery城市地图鼠标经过标注显示文字介绍代码
一款鼠标经过地图城市标注显示文字详细介绍的jQuery城市地图标注代码,城市的设定根据自己的需要修改就行了。


JS代码


<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>