模仿百度教育->考试日历控件， 自己用html+css+jquery实现

转载请注明：学时网 » 模仿百度教育->考试日历控件， 自己用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部分

<div class=”exam-info”>
<div class=”exam-title”>
<a class=”next-month-btn”></a>
<a class=”prev-month-btn”></a>
<h2>
考试日历
</h2>
</div>
<div class=”month-slide”>
<ul class=”month-list third-site”>
<#list 1 .. 12 as monthNum>
<li class = “month-item” data-month=”${monthNum}”>
<div class=”month-card”>
<i>${monthNum}</i>
月
</div>
</li>
</#list>
<ul>
</div>
<div class=”exam-viewport”>
</a>
<a class=”exam-desc exam-more”>更多↓
</a>
<ul class=”exam-list  ow_exam”>
<li  class=”exam-item” data-exam=”1″>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E7%A1%95%E5%A3%AB%E7%A0%94%E7%A9%B6%E7%94%9F%E5%85%A5%E5%AD%A6%E8%80%83%E8%AF%95&amp;key=%E7%A1%95%E5%A3%AB%E7%A0%94%E7%A9%B6%E7%94%9F%E5%85%A5%E5%AD%A6%E8%80%83%E8%AF%95″>
<span class=”exam-name”>考研
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>

<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%85%AC%E5%85%B1%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMPA%E8%80%83%E8%AF%95&amp;key=%E5%85%AC%E5%85%B1%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMPA%E8%80%83%E8%AF%95″>
<span class=”exam-name”>MPA（全日制）
</span>

<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%B7%A5%E5%95%86%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMBA%E8%80%83%E8%AF%95&amp;key=%E5%B7%A5%E5%95%86%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMBA%E8%80%83%E8%AF%95″>
<span class=”exam-name”>MBA（全日制）
</span>

<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E9%9B%85%E6%80%9D%E8%80%83%E8%AF%95&amp;key=%E9%9B%85%E6%80%9D%E8%80%83%E8%AF%95″>
<span class=”exam-name”>雅思考试
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>

<span class=”exam-time”>1月9、11、18、25日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E9%AB%98%E7%AD%89%E6%95%99%E8%82%B2%E8%87%AA%E5%AD%A6%E8%80%83%E8%AF%95&amp;key=%E9%AB%98%E7%AD%89%E6%95%99%E8%82%B2%E8%87%AA%E5%AD%A6%E8%80%83%E8%AF%95″>
<span class=”exam-name”>自考
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>

<span class=”exam-time”>1月11、12日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E6%89%98%E7%A6%8F%E8%80%83%E8%AF%95&amp;key=%E6%89%98%E7%A6%8F%E8%80%83%E8%AF%95″>
<span class=”exam-name”>托福考试
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>

<span class=”exam-time”>1月12、18日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://www.shgkw.org/ “>
<span class=”exam-name”>上海公务员考试
</span>

<span class=”exam-time”>1月18日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%9F%BA%E9%87%91%E4%BB%8E%E4%B8%9A%E8%80%83%E8%AF%95&amp;key=%E5%9F%BA%E9%87%91%E4%BB%8E%E4%B8%9A%E8%80%83%E8%AF%95″>
<span class=”exam-name”>基金从业
</span>

<span class=”exam-time”>1月18日</span>
</a>
</li>

</ul>
</div>
</div>