jquery实现一个日历备忘录动态效果
代码语言:html
所属分类:布局界面
代码描述:jquery实现一个日历备忘录动态效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css"> <style> @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; src: local('Lato Black Italic'), local('Lato-BlackItalic'), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI3wi_Gwfo.ttf) format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh50XSwiPHA.ttf) format('truetype'); } .txt__normal { font-family: 'Lato', sans-serif; font-weight: 400; } .txt__normal--it { font-family: 'Lato', sans-serif; font-weight: 400; font-style: italic; } .txt__bold { font-family: 'Lato', sans-serif; font-weight: 900; } .txt__bold--it { font-family: 'Lato', sans-serif; font-weight: 900; font-style: italic; } .txt__awesome { font: normal normal normal 14px/1 FontAwesome; } /* VARIABLES ================================================*/ /* RESPONSIVE ================================================*/ /* ===========================================================*/ body { position: realative; height: 100%; } body.overlay:before { position: fixed; content: ''; display: block; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 100; } html { height: 100%; background: #003567; color: #ffffff; font-size: 13px; font-family: 'Lato', sans-serif; font-weight: 400; } .wrapper { position: relative; max-width: 1280px; width: 100%; height: 100%; margin: 0 auto; } a { color: inherit; text-decoration: none; } /* UTILITY ===========================================================*/ .u-border-box { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .u-transition { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .u-transition.long { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .u-transition.elastic { transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .resetDefaultApparence { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; border-radius: 0px; padding: 0; border-width: 0; resize: none; } .resetDefaultApparence::-ms-expand { display: none; } /* STYLE ===========================================================*/ header { position: fixed; height: 80px; width: 100%; z-index: 50; background: #003567; } header > .wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: 0 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #ffffff; letter-spacing: 2px; font-size: 13px; } header > .wrapper a { color: #ffffff; text-decoration: none; margin-left: 10px; } .c-monthyear { display: -webkit-box; display: flex; } .c-month { position: relative; height: 80px; line-height: 80px; } .c-month #c-paginator { position: relative; width: 200px; display: block; height: 80px; line-height: 80px; text-align: center; overflow: hidden; } .c-month #c-paginator .c-paginator__month { position: absolute; width: 200px; top: 0; bottom: 0; right: 0; } .c-month #c-paginator .c-paginator__month:nth-child(1) { left: 0; } .c-month #c-paginator .c-paginator__month:nth-child(2) { left: 200px; } .c-month #c-paginator .c-paginator__month:nth-child(3) { left: 400px; } .c-month #c-paginator .c-paginator__month:nth-child(4) { left: 600px; } .c-month #c-paginator .c-paginator__month:nth-child(5) { left: 800px; } .c-month #c-paginator .c-paginator__month:nth-child(6) { left: 1000px; } .c-month #c-paginator .c-paginator__month:nth-child(7) { left: 1200px; } .c-month #c-paginator .c-paginator__month:nth-child(8) { left: 1400px; } .c-month #c-paginator .c-paginator__month:nth-child(9) { left: 1600px; } .c-month #c-paginator .c-paginator__month:nth-child(10) { left: 1800px; } .c-month #c-paginator .c-paginator__month:nth-child(11) { left: 2000px; } .c-month #c-paginator .c-paginator__month:nth-child(12) { left: 2200px; } .c-month .prev, .c-month .next { position: absolute; display: block; top: 50%; width: 30px; height: 30px; padding: 9px 12px; background-color: #004b8f; cursor: pointer; z-index: 10; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transform: translatey(-50%); -webkit-transform: translatey(-50%); border-radius: 50%; -webkit-border-radius: 50%; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .c-month .prev.long, .c-month .next.long { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .c-month .prev.elastic, .c-month .next.elastic { transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-month .prev { left: 0; } .c-month .prev:hover { padding: 9px 10px; background-color: #0055a4; } .c-month .next { right: 0; } .c-month .next:hover { padding: 9px 14px; background-color: #0055a4; } .c-paginator__year { height: 80px; line-height: 80px; padding: 0 20px; } .o-btn { display: inline-block; padding: 0 10px; line-height: 30px; height: 30px; background-color: #004b8f; text-transform: uppercase; letter-spacing: 2px; border-radius: 15px; -webkit-border-radius: 15px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .o-btn.long { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .o-btn.elastic { transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .o-btn span { margin-left: 10px; } .o-btn:hover { background-color: #0055a4; } .c-calendar { padding-top: 80px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .c-calendar__style { background-color: #00407b; margin: 20px; padding: 10px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18); border-radius: 6px; -webkit-border-radius: 6px; } .c-cal__container { position: relative; width: calc(100% - 300px); height: 0; padding-bottom: 65%; overflow: hidden; } .c-main { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .c-main-01 { left: 0; } .c-main-02 { left: 100%; } .c-main-03 { left: 200%; } .c-main-04 { left: 300%; } .c-main-05 { left: 400%; } .c-main-06 { left: 500%; } .c-main-07 { left: 600%; } .c-main-08 { left: 700%; } .c-main-09 { left: 800%; } .c-main-10 { left: 900%; } .c-main-11 { left: 1000%; } .c-main-12 { left: 1100%; } .c-cal__row { display: -webkit-box; display: flex; -webkit-box-pack: start; justify-content: flex-start; } .c-cal__col { width: calc(100% / 7); text-align: center; height: 50px; line-height: 50px; letter-spacing: 2px; text-transform: uppercase; } .c-cal__cel { position: relative; width: calc(100% / 7); text-align: center; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .c-cal__cel p { position: absolute; margin: 0; top: 50%; left: 50%; width: 40px; height: 40px; line-height: 40px; background: #004585; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 50%; -webkit-border-radius: 50%; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .c-cal__cel::before { content: ""; display: block; padding-top: 100%; } .c-cal__cel:nth-child(1) p { background: rgba(215, 16, 15, 0.2); } .c-cal__cel:nth-child(7) p { background: #003b71; } .c-cal__cel:hover { background-color: #004b8f !important; } .c-cal__cel:hover p { background: #003b71 !important; } .c-cal__cel.isSelected { background-color: #004b8f; } .c-cal__cel.isSelected p { background: #003b71; } .c-cal__cel.isToday { background-color: rgba(245, 113, 112, 0.2); } .c-cal__cel.isToday p { background: rgba(245, 113, 112, 0.4); } .c-cal__cel.other_month { color: rgba(255, 255, 255, 0.2); } .event:before { position: absolute; content: ''; display: block; width: 10px; height: 10px; background-color: #F5F5F5; z-index: 10; padding: 0; top: 50%; left: 50%; border-radius: 50%; -webkit-border-radius: 50%; transform: translate(-50%, calc(50% + 20px/2)); -webkit-transform: translate(-50%, calc(50% + 20px/2)); } .event--birthday:before { background-color: #FACC2E; } .event--festivity:before { background-color: #10DDC2; } .event--important:before { background-color: #F57170; } .c-aside { width: 300px; padding: 20px; } .c-aside__day { font-size: 28px; margin: 50px 0; } .c-aside__day .c-aside__num { font-family: 'Lato', sans-serif; font-weight: 900; } .c-aside__event { position: relative; padding-left: 20px; margin: 20px 0; } .c-aside__event:before { position: absolute; display: block; content: ''; width: 16px; height: 16px; left: 0; background-color: #F5F5F5; border-radius: 50%; -webkit-border-radius: 50%; } .c-aside__event--birthday:before { background-color: #FACC2E; } .c-aside__event--festivity:before { background-color: #10DDC2; } .c-aside__event--important:before { background-color: #F57170; } .c-event__creator { position: fixed; top: 50%; left: 50%; max-width: 500px; max-height: 470px; width: 100%; height: 100%; z-index: 100; padding: 20px; visibility: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transform: translate(-50%, -50%) scale(0.9); -webkit-transform: translate(-50%, -50%) scale(0.9); } .c-event__creator.long { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .c-event__creator.elastic { transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .c-event__creator form { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: justify; justify-content: space-between; } .c-event__creator.isVisible { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } input, textarea, select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; border-radius: 0px; padding: 0; border-width: 0; resize: none; margin: 10px 0; padding: 10px; width: 100%; border-radius: 20px; -webkit-border-radius: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input::-ms-expand, textarea::-ms-expand, select::-ms-expand { display: none; } input { height: 40px; } </style> </head> <body translate="no"> <script> // fill the month table with column headings function day_title(day_name) { document.write("<div class='c-cal__col'>" + day_name + "</div>"); } // fills the month table with numbers function fill_table(month, month_length, indexMonth) { day = 1; // begin the new month table document.write("<div class='c-main c-main-" + indexMonth + "'>"); //document.write("<b>"+month+" "+year+"</b>") // column headings document.write("<div class='c-cal__row'>"); day_title("Sun"); day_title("Mon"); day_title("Tue"); day_title("Wed"); day_title("Thu"); day_title("Fri"); day_title("Sat"); document.write("</div>"); // pad cells before first day of .........完整代码请登录后点击上方下载按钮下载查看
网友评论0