转载请注明：学时网 » 模仿百度教育->考试日历控件， 自己用html+css+jquery实现
效果图
实现后的效果
html里面只写了一个月的考试信息，其他月份一样。用到的图片可以去网上下载，
由于自己网站部分，给这个日历的高度不够高，自己加了一个更多的事件
（鼠标移动到更多，则全部显示本月考试信息，鼠标移出恢复原来样式）
js部分
$(function(){
//定位当前月份
locationMonth();
//点击下一月按钮
$(‘.next-month-btn’).click(function(){
//获取当前选定的月份
var selectMonth = $(‘.selected-month’).data(‘month’);
var toMonth = selectMonth + 1;
if (selectMonth == 11) {
$(‘.next-month-btn’).addClass(“next-month-disable”);
}
if (selectMonth < 12) {
var nowLeft = $(‘.month-list’).data(“left”);
//这个时候需要移动月份条
if (nowLeft > -270 && toMonth > 6) {
var toLeft = – (toMonth – 6) * 45;
$(‘.month-list’).animate({marginLeft: toLeft + “px”});
$(‘.month-list’).data(‘left’, toLeft);
}
toChangeMonth(selectMonth, toMonth);
$(‘.prev-month-btn’).removeClass(“next-month-disable”);
}
});
//点击上一月按钮
$(‘.prev-month-btn’).click(function(){
//获取当前选定的月份
var selectMonth = $(‘.selected-month’).data(‘month’);
var toMonth = selectMonth – 1;
if (selectMonth == 2) {
$(‘.prev-month-btn’).addClass(“prev-month-disable”);
}
if (selectMonth > 1) {
var nowLeft = $(‘.month-list’).data(“left”);
//这个时候需要移动月份条
if (nowLeft < 0 && toMonth < 7) {
var toLeft = -270 + (7 – toMonth) * 45;
$(‘.month-list’).animate({marginLeft: toLeft + “px”});
$(‘.month-list’).data(‘left’, toLeft);
}
toChangeMonth(selectMonth, toMonth);
$(‘.next-month-btn’).removeClass(“next-month-disable”);
}
});
//月份单击事件
$(‘.month-item’).click(function(){
var oldMonth = $(‘.selected-month’).data(‘month’);
var toMonth = $(this).data(“month”);
toChangeMonth(oldMonth, toMonth);
toChangeExam(toMonth);
});
//为更多按钮添加鼠标事件
$(‘.exam-more’).mouseenter(function(){
var selectMonth = $(‘.selected-month’).data(‘month’);
var toHeight = $(“[data-exam = '" + selectMonth + "']“).children().size() * 28 + “px”;
$(‘.exam-viewport’).animate({height:toHeight});
$(‘.exam-more’).hide();
});
$(‘.exam-viewport’).mouseleave(function(){
$(‘.exam-viewport’).animate({height:”140px”});
$(‘.exam-more’).show();
});
});
//获取当前时间月份，定位显示那个月份的考试信息信息
function locationMonth(){
var nowMonth = ownGetCurrentMonth();
$(“[data-month = '" + nowMonth + "']“).addClass(“selected-month”);
$(“[data-month = '" + nowMonth + "']“).children().css(“background”, “transparent”);
var monthMargin = -parseInt(nowMonth / 7) * 270;
$(“.month-list”).css(“margin-left”, monthMargin + “px”);
$(“.month-list”).data(“left”, monthMargin);
toChangeExam(nowMonth);
}
//获取当前月数
function ownGetCurrentMonth() {
var nowDate = new Date();
var nowMonth = nowDate.getMonth() + 1;
return nowMonth;
}
//负责移动月份条，改变选择月份样式
function toChangeMonth(srcMonth, toMonth) {
$(“[data-month = '" + toMonth + "']“).addClass(“selected-month”);
$(“[data-month = '" + toMonth + "']“).children().css(“background”, “transparent”);
$(“[data-month = '" + srcMonth + "']“).removeClass(“selected-month”);
$(“[data-month = '" + srcMonth + "']“).children().css(“background-color”, “#E0F8F1″);
toChangeExam(toMonth);
}
//负责切换每月考试内容
function toChangeExam(toMonth) {
var examPostion = – 268 * (toMonth – 1) + “px”;
$(‘.ow_exam’).animate({marginLeft: examPostion});
}
css部分
.exam-info {
height: 100%;
width: 100%;
}
.exam-info .exam-title {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 25px;
line-height: 25px;
padding:5px 10px;;
}
.exam-info h2 {
display: inline-block;
font-family: “Microsoft YaHei”,”微软雅黑”;
font-size: 16px;
font-weight: 400;
width: 80px;
margin: 0;
padding: 0;
}
.exam-info .prev-month-btn, .exam-info .next-month-btn {
background: url(“../img/baidu.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #ccc;
cursor: pointer;
float: right;
height: 24px;
width: 24px;
}
.exam-info .prev-month-btn {
background-position: -2px -436px;
}
.exam-info .prev-month-btn:hover {
background-position: -2px -373px;
border: 1px solid #40b019;
}
.exam-info .next-month-btn {
background-position: 1px -405px;
}
.exam-info .next-month-btn:hover {
background-position: 1px -340px;
border: 1px solid #40b019;
}
.prev-month-disable {
background-position: -2px -469px;
}
.exam-info .prev-month-disable:hover {
background-position: -2px -469px;
border: 1px solid #ccc;
}
.next-month-disable {
background-position: 1px -499px;
}
.exam-info .next-month-disable:hover {
background-position: 1px -499px;
border: 1px solid #ccc;
}
.exam-info .month-slide {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 45px;
overflow: hidden;
}
.exam-info .month-list:before, .exam-info .month-list:after {
content: “”;
display: table;
line-height: 0;
}
.exam-info .month-list:after {
clear: both;
}
.exam-info .month-list:before, .exam-info .month-list:after {
content: “”;
display: table;
line-height: 0;
}
.exam-info .third-site {
left: -406px;
}
.exam-info .month-list {
height: 45px;
width: 540px;
}
.exam-info .month-item {
cursor: pointer;
float: left;
height: 45px;
line-height: 38px;
margin-right: 2px;
width: 43px;
}
.exam-info .month-item .month-card {
background-color: #E0F8F1;
color: #787878;
height: 40px;
text-align: center;
}
.exam-info .month-item .month-card i {
font-family: “Microsoft YaHei”,”微软雅黑”;
font-size: 18px;
font-style: normal;
}
.exam-info .month-item .month-card {
color: #787878;
text-align: center;
}
.selected-month {
background: url(“../img/month.png”);
}
.exam-info .exam-viewport {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 140px;
width: 268px;
overflow: hidden;
position: absolute;
background:#e0f8f1;
}
.exam-info .exam-list {
font-size: 12px;
width: 3500px;
}
.exam-info .exam-item {
float: left;
line-height: 25px;
padding: 0 10px;
width: 248px;
}
.exam-info .exam-desc {
color: #333;
cursor: pointer;
display: inline-block;
height: 28px;
width: 248px;
}
.exam-info .exam-name {
background: url(“../img/green-point.png”) no-repeat scroll -7px 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 25px;
line-height: 25px;
padding-left: 10px;
}
.exam-info .exam-desc:hover {
color:#40b019;
}
.c-text-danger {
background-color: #f13f40;
}
.c-text {
color: #fff;
display: inline-block;
font-size: 12px;
font-style: normal;
height: 12px;
line-height: 12px;
overflow: hidden;
padding: 2px;
text-align: center;
vertical-align: text-bottom;
}
.exam-info .exam-time {
float:right;
padding-right:10px;
}
.exam-more {
bottom:0px;
left:0px;
background:#e0f8f1;
position: absolute;
text-align: right;
}
html部分