jQuery地图网点提示信息js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery地图网点提示信息js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停中国地图网络销售网点提示信息</title>
<link href="map_img/map.css" rel="stylesheet" type="text/css">
<script src="map_img/jquery-1.5.2.min.js"></script>
</head>
<body>

<div class="b_map">
	<ul id="m_btn" class="e_map_tags">
		<li class="m_beijing" data-type="beijing">北方市场</li>
		<li class="m_shanghai" data-type="shanghai">苏豫皖市场</li>
		<li class="m_hangzhou" data-type="hangzhou">南方市场</li>
	</ul>
	<div class="e_map_info">
		<div class="m_content m_beijing hide" data-panel="beijing">
			<i></i>
			<h4>北方市场</h4>
			<p><font style="font-weight:bold">主机一科 北方主机市场</font><br />科长 李志武 13800138000<br /><font style="font-weight:bold">配件一科 长江以北配件市场</font><br />科长 方　文 13800138000</p>
		</div>
		
		<div class="m_content m_shanghai hide" data-panel="shanghai">
			<i></i>
			<h4>苏豫皖市场</h4>
			<p><font style="font-weight:bold">主机二科 苏豫皖市场</font><br />科长 李沁兼 13800138000<br /><font style="font-weight:bold">配件一科 长江以北配件市场</font><br />科长 方　文 13800138000</p>
		</div>
		
		<div class="m_content m_hangzhou hide" data-panel="hangzhou">
			<i></i>
			<h4>南方市场</h4>
			<p><font style="font-weight:bold">主机三科 南方主机市场</font><br />科长 黄小雪 13800138000<br /><font style="font-weight:bold">配件二科 长江以南配件市场</font><br />科长 蔡新国 13800138000</p>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	var timer = {};
	$('#m_btn').delegate('li', 'mouseenter', function(){
		var self = $(this);
		var tp = self.attr('data-type');
		clearTimeout(timer[tp]);
		timer[tp] = setTimeout(function(){
			self.addClass('hover');
			$('div[data-panel=' + tp + ']').removeClass('hide');
		},100);
	}).delegate('li', 'mouseleave', function(){
		var self = $(this);
		var tp = self.attr('data-type');
		clearTimeout(timer[tp])
		timer[tp] = setTimeout(function(){
			self.removeClass('hover');
			$('div[data-panel=' + tp + ']').addClass('hide');
		},100);
	});
	
	$(document.body).delegate('div.m_content', 'mouseenter', function(){
		clearTimeout(timer[$(this).attr('data-panel')]);
	}).delegate('div.m_content', 'mouseleave', function(){
		$(this).addClass('hide');
		$('li[data-type='+ $(this).attr('data-panel') +']').removeClass('hover');
	});
	
});
</script>
</body>
</html>

CSS代码(map.css):

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,Arial,Helvetica,sans-serif;}
/* b_map */
.b_map{margin:55px auto 20px;width:487px;background:url(chinamap.jpg) no-repeat 0px 0px;height:399px}
.e_map_tags{z-index:1;position:relative}
.e_map_tags li{width:90px;height:25px;z-index:1;position:absolute;text-align:center;padding-bottom:8px;display:block;font:bold 14px/25px simsun,arial,sans-serif;background:url(map_tag1.png) no-repeat 0px 0px;color:#fff;top:0px;cursor:pointer;left:0px}
.e_map_tags .m_beijing{top:120px;left:335px}
.e_map_tags .m_shanghai{top:178px;left:370px}
.e_map_tags .m_guangzhou{background:url(map_tag2.png) no-repeat 0px 0px;top:314px;left:293px}
.e_map_tags .m_chengdu{top:230px;left:223px}
.e_map_tags .m_xian{top:190px;left:290px}
.e_map_tags .m_xianggang{top:320px;left:345px}
.e_map_tags .m_hangzhou{background:url(map_tag2.png) no-repeat 0px 0px;top:255px;left:275px}
.e_map_tags li:hover{background-position:0px -38px}
.e_map_tags li.hover{background-position:0px -38px}
.e_map_info{z-index:2;position:relative}
.e_map_info .m_content{z-index:1;border:#b7e0f0 1px solid;position:absolute;padding:15px 20px;background-color:#fff;width:280px;display:block;top:0px;left:0px}
.e_map_info .hide{display:none;}
.e_map_info .m_content i{z-index:1;position:absolute;width:8px;bottom:-8px;display:block;background:url(map_idx1.png) no-repeat 0px 0px;height:8px;overflow:hidden;right:-1px;_right:-2px}
.e_map_info .m_content h4{padding-left:180px;font:16px/33px "microsoft yahei",simsun,arial,sans-serif;margin-bottom:18px;background:url(map_qunar.jpg) no-repeat 0px 0px;height:50px;}
.e_map_info .m_content p{font:14px/22px simsun,arial,sans-serif}
.e_map_info .m_beijing{top:-38px;left:6px}
.e_map_info .m_shanghai{top:20px;left:40px}
.e_map_info .m_guangzhou{top:176px;left:-58px}
.e_map_info .m_chengdu{top:92px;left:-127px}
.e_map_info .m_xian{top:74px;left:-60px}
.e_map_info .m_xianggang{top:204px;left:-4px}
.e_map_info .m_hangzhou{top:98px;left:-55px}

附件:下载该文件资源,减少时间成本(增值服务)