我知道，沒(méi)有圖片你們是不會(huì)來(lái)的
聲明
這個(gè)效果是從 這里.看見(jiàn)的，原文使用的angularJs實(shí)現(xiàn)的。
html代碼使用了 haml，css 使用了scss。如果你喜歡，你也可以用 jade，less 來(lái)重寫(xiě)。
我重新使用 js 實(shí)現(xiàn)了一遍。包括css，html代碼均為重新寫(xiě)的。目前只在chrome下面跑~
示例
這里是一個(gè)Demo.
準(zhǔn)備材料
- sublime text3 編輯器
- google瀏覽器 chrome 或者其他對(duì)css3兼容性比較好的瀏覽器。不要萬(wàn)惡的IE...
整體思想
1. 布局
很明顯的看的出來(lái)這是一個(gè)左右布局，（既然是一個(gè)整體，那我們就把它裝到一個(gè)盒子里面。就是body下面最外層的div吶）。左右布局，我們?cè)賮?lái)左邊來(lái)一個(gè)div，右邊來(lái)一個(gè)div。分別為 div.left(emmet的快捷方式寫(xiě)法)，div.right 。剩下的內(nèi)部的就看個(gè)人的喜歡了?？梢允?上下，也可以是上中下。
2. 動(dòng)畫(huà)效果
每一單個(gè)日期的我點(diǎn)擊事件是使用了一個(gè)彈動(dòng)效果，原理就是一開(kāi)始很小，然后變大，最后再縮小到一定程度停止。使用css3的 animation 的100%很容易就能做到的。動(dòng)畫(huà)的過(guò)程，就是速度使用貝塞爾曲線自定義就好了，怎么好看怎么來(lái)。右側(cè)的動(dòng)畫(huà)效果同理。不過(guò)是使用了 2d 轉(zhuǎn)換。
3. 默認(rèn)樣式的更改以及需要注意的地方。
I： 首先是盒子模型,其中有一段css的代碼是這樣的...
.left .week-title{
margin-top: 15px;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 34px;
font-family: 'Open Sans';
}
.left .week-title li{
float: left;
list-style: none;
display: block;
text-align: center;
line-height: 34px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
這里的三個(gè)display是一個(gè)兼容性寫(xiě)法，貌似還有另外一種兼容寫(xiě)法，百度一下，你就知道。我就不貼出來(lái)了。盒子模型的好處是橫向布局的容器，內(nèi)部的標(biāo)簽的占用寬度
是計(jì)算機(jī)自動(dòng)計(jì)算的結(jié)果，肯定精確。 例如：我有一個(gè)div 用了一個(gè)盒子模型，他的寬度固定是500px；里面如果有5個(gè)標(biāo)簽并排，我已知其中一個(gè)為130px; 剩下4個(gè)的寬度一樣，那么我剩下的四個(gè)只需要設(shè)置 flex: 1; 即可。如果有一天父級(jí)的寬度發(fā)生了改變，我這四個(gè)div的寬度也會(huì)自動(dòng)重新計(jì)算，不怕裝不滿(mǎn)整個(gè)盒子了。
II : placeholder與滾動(dòng)條的樣式自定義。
/* placeholder 顏色自定義 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #ddd;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #ddd;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #ddd;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #ddd;
}
/* 瀏覽器滾動(dòng)條，前景色，背景色，滾動(dòng)條顏色 ... */
.right .list::-webkit-scrollbar {
width: 10px;
}
.right .list::-webkit-scrollbar-track {
background-color: #007fb0;
}
.right .list::-webkit-scrollbar-thumb {
background-color: #00A8E8;
}
.right .list::-webkit-scrollbar-button {
background-color: #007fb0;
}
.right .list::-webkit-scrollbar-corner {
background-color: black;
}
III: css3動(dòng)畫(huà)的觸發(fā)機(jī)制
其實(shí)html中有動(dòng)畫(huà)會(huì)產(chǎn)生的根本原因是標(biāo)簽的某一個(gè)屬性發(fā)生了改變，例如：背景顏色，長(zhǎng)度，寬度，透明度等等...。那么，為什么他的屬性會(huì)發(fā)生改變呢？只有一個(gè)原因，
添加或者移除了 class，或者id 或者...。。那么我們要實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)，只需要更改它不同class下面的狀態(tài)不就好了么？ 至于過(guò)程，那就是你自己定義的了，動(dòng)畫(huà)從開(kāi)始到結(jié)束需要多久，勻速，減速，加速？等等.....
html代碼
<div class="left">
<div class="header">
<i class="icon-angle-left" id="prev"></i>
<h2 class="header-title">March</h2>
<i class="icon-angle-right" id="next"></i>
</div>
<ul class="week-title">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<div class="days">
<ul class="dates"></ul>
</div>
</div>
<div class="right">
<ul class="list"></ul>
<div class="put">
<input type="text" placeholder="Enter a task for this day" value="" id="txtInput">
<select name="thingstype" id="thingstype">
<option value="Social">Social</option>
<option value="Work">Work</option>
</select>
</div>
</div>
</div>```
css代碼
代碼就在這里 Css代碼.
JS代碼
代碼就在這里 Js代碼.
