转载请注明:学时网 » 模仿百度教育->考试日历控件, 自己用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&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&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&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&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&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&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&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>
相关推荐
jquery日历控件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="theme/jquery.ui.all.css"> ...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
运用JavaScript+Jquery+CSS实现万年历,通过web前端技术开发出日历控件;可以作出在某年某月某日需要有一个培训时间。我相信该原代码能够帮助到你,谢谢!
超酷日历控件,利用jQuery+CSS创建,可以添加到自己网站上。
js css jquery 各种控件,游戏,导航栏,图片特效,日历控件,树形菜单,自动级联菜单等等,收集了很久,每个都是检查可用。
我们分享过很多基于jQuery和CSS3的时钟和日历插件,样式和功能也都非常丰富,例如这篇文章15个超强悍的CSS3圆盘时钟动画赏析中就总结了很多超级炫酷而且实用的日历时间控件。这次我们给大家带来一款背景可以跟随月份...
1、拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松...2、利用jQuery和CSS制作一个模仿iphone样式的日历控件 3、支持每个月份里的所有天数添加内容 4、支持带带checkbox多日期选择日历
web开发者必备资料,内含css,js,html,jquery参考手册,js日历控件,颜色选择器
之前我们介绍过很多基于jQuery的日期时间选择控件,比如这款基于Bootstrap和jQuery的日历控件和日期选择插件,也介绍过一些基于HTML5和CSS3的日历控件,比如这款华丽的HTML5日期选择器。今天我们要分享一款基于HTML5...
js layDate日历控件代码.zip
注:有的时候,使用改日历控件在ie8上的时候,容易出现刷新,效果很不好,这是因为版本的问题,好像4.2以后的版本就不会出现这个问题了,最好使用最新版本的.. 3、Ajax自带的无刷新的日历控件 4、jquery的插件...
注释掉的是默认的css样式,你可以修改成自己的样式实现另一个风格,大家参考使用吧 代码如下:/** * jQuery Calendar Plugin */(function($, window) { ‘use strict’; $.fn.calendar = function(options) { /...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
网上有很多功能丰富的日历插件,但有时并不需要那么多功能,自己边学习边作了个jquery日历插件,用js的Date()对象做的,核心代码很简单,说实话我也没想到日历这么简单就能实现。因为这控件是用在手机应用上的,所以...
控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了。 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外...
适用于WEB开发的多种日程/日历插件,日历日期插件包含多种CSS样式,从年份-月份-单日-小时多种插件选择,源码整洁,便于修改;日程插件包含完整版Fullcalendar控件demo以及其他样式控件,欢迎交流。
jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox、chrome、ie。
DCalendar JQuery日历插件以及用于输入字段的日期选择器。 如何使用确保首先包含jQuery库。 包括dcalendar.picker.css和dc您可能想签出duDatepicker插件。 DCalendar JQuery日历插件以及用于输入字段的日期选择器。 ...
一个基于尼泊尔日历的简单但功能强大的日期选择器。 支持单日期选择和多日期选择。 可以与表单输入内联使用。 可以通过按Shift或Control / Command键来选择多个日期。 演示 在检查工作演示 入门 正在安装 包括这些...