jQuery鼠标滑过日历弹出备注信息代码

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

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

以下是 jQuery鼠标滑过日历弹出备注信息代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>jQuery鼠标滑过日历弹出备注信息代码</title>

<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	.day{
		width: 700px;
		height: 100px;
		border: 1px solid green;
		margin: 0px auto;
		margin-top: 20px;
		border-bottom: none;
		overflow: hidden;
	}
	.daya{
		width: 700px;
		height: 500px;
		border: 1px solid green;
		margin: 0px auto;
		border-top: none
	}
	li{
		list-style-type: none;
		width: 98px;
		height: 98px;
		float: left;
		background-color: yellow;
		border: 1px solid green;
		position: relative;
		text-align: center;
		line-height: 98px;
		color: green;
		font-size: 18px;
		font-family: "黑体";
	}
	p{
		width: 200px;
		height: 200px;
		background: green;
		position: absolute;
		display: none;
		color: yellow;
		font-size: 18px;
		text-align: center;
		line-height: 200px;
		font-family: "黑体";
	}
	.p-left{
		top: -1px;
		right: 100px;
		z-index: 99;
	}
	.p-right{
		top: -1px;
		left: 100px;
		z-index: 99;
	}
	.p-bottom-r{
		bottom: -1px;
		left: 100px;
		z-index: 99
	}
	.p-bottom-l{
		bottom: -1px;
		left: 100px;
		z-index: 99
	}
</style>

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 
	$(".daya li").hover(function(){
		var index = $(this).index();
		if(index==5||index==6||index==12||index==13||index==19||index==20||index==26||index==27){
			$(".daya li").eq(index).find("p").show().addClass("p-left");
		}else if(index==28||index==29||index==30||index==31||index==32){
			$(".daya li").eq(index).find("p").show().addClass("p-bottom-r");
		}else if(index==33||index==34){
			$(".daya li").eq(index).find("p").show().addClass("p-bottom-l");
		}else{
			$(".daya li").eq(index).find("p").show().addClass("p-right");
		}
	},function(){
		$(".daya li").eq($(this).index()).find("p").hide();
	});
}); 
</script>

</head>
<body>
<ul class="day">
	<li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li>
	<li>星期五</li><li>星期六</li><li>星期日</li>
</ul>
<ul class="daya">
	<li></li>
	<li></li>
	<li></li>
	<li>01<p>01</p></li>
	<li>02<p>02</p></li>
	<li>03<p>03</p></li>
	<li>04<p>04</p></li>
	<li>05<p>05</p></li>
	<li>06<p>06</p></li>
	<li>07<p>07</p></li>
	<li>08<p>08</p></li>
	<li>09<p>09</p></li>
	<li>10<p>10</p></li>
	<li>11<p>11</p></li>
	<li>12<p>12</p></li>
	<li>13<p>13</p></li>
	<li>14<p>14</p></li>
	<li>15<p>15</p></li>
	<li>16<p>16</p></li>
	<li>17<p>17</p></li>
	<li>18<p>18</p></li>
	<li>19<p>19</p></li>
	<li>20<p>20</p></li>
	<li>21<p>21</p></li>
	<li>22<p>22</p></li>
	<li>23<p>23</p></li>
	<li>24<p>24</p></li>
	<li>25<p>25</p></li>
	<li>26<p>26</p></li>
	<li>27<p>27</p></li>
	<li>28<p>28</p></li>
	<li>29<p>29</p></li>
	<li>30<p>30</p></li>
	<li></li>
	<li></li>
</ul>

</body>
</html>

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