iPhone日历应用程序在网页中的完美实现

看着iPhone的产品，大家都会感叹苹果卖的不是产品而是艺术。

今天我们就来用CSS+jQuery结合实现iPhone日历的效果。

iPhone日历应用程序在网页中的完美实现

演示地址：http://www.56mp.cn/upload/Calendar/

下面是简单的HTML代码：

<table cellspacing="0">
   <thead>
    <tr>
     <th>Mon</th><th>Tue</th><th>Wed</th>
     <th>Thu</th><th>Fri</th><th>Sat</th>
     <th>Sun</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td class="padding" colspan="3"></td>
     <td> 1</td>
     <td> 2</td>
     <td> 3</td>
     <td> 4</td>
    </tr>
    <tr>
     <td> 5</td>
     <td> 6</td>
     <td> 7</td>
     <td> 8</td>
     <td class="today"> 9</td>
     <td>10</td>
     <td>11</td>
    </tr>
    <tr>
     <td>12</td>
     <td class="date_has_event">
      13
      <div class="events">
       <ul>
        <li>
         <span class="title">Event 1</span>
         <span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
        </li>
        <li>
         <span class="title">Event 2</span>
         <span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </li>
       </ul>
      </div>
     </td>
     <td>14</td>
     <td>15</td>
     <td>16</td>
     <td>17</td>
     <td>18</td>
    </tr>
    <tr>
     <td>19</td>
     <td>20</td>
     <td>21</td>
     <td class="date_has_event">
      22
      <div class="events">
       <ul>
        <li>
         <span class="title">Event 1</span>
         <span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
        </li>
        <li>
         <span class="title">Event 2</span>
         <span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </li>
       </ul>
      </div>
     </td>
     <td>23</td>
     <td>24</td>
     <td>25</td>
    </tr> 
    <tr>
     <td>26</td>
     <td>27</td>
     <td>28</td>
     <td>29</td>
     <td>30</td>
     <td>31</td>
     <td class="padding"></td>
    </tr>
   </tbody>
   <tfoot>
    <th>Mon</th><th>Tue</th><th>Wed</th>
    <th>Thu</th><th>Fri</th><th>Sat</th>
    <th>Sun</th>
   </tfoot>
  </table>

CSS部分：

table { border-collapse: separate; border: 1px solid #9DABCE; border-width: 0px 0px 1px 1px; margin: 10px auto; font-size: 20px;}td, th { width: 81px; height: 81px; text-align: center; vertical-align: middle; background: url(../img/cells.png); color: #444; position: relative;}th { height: 30px; font-weight: bold; font-size: 14px;}td:hover, th:hover { background-position: 0px -81px; color: #222;}td.date_has_event { background-position: 162px 0px; color: white;}td.date_has_event:hover { background-position: 162px -81px;}td.padding { background: url(../img/calpad.jpg);}td.today { background-position: 81px 0px; color: white;}td.today:hover { background-position: 81px -81px;}

下面我们要解决图片无缝链接的问题：

<td class="date_has_event"> 13 <div class="events">         <ul>                 <li>                         <span class="title">Event 1</span>                         <span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>                 </li>                 <li>                         <span class="title">Event 2</span>                         <span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>                 </li>         </ul> </div></td>

jQuery部分：

$(function () { $('.date_has_event').each(function () { // options var distance = 10; var time = 250; var hideDelay = 500;  var hideDelayTimer = null;  // tracker var beingShown = false; var shown = false;  var trigger = $(this); var popup = $('.events ul', this).css('opacity', 0);  // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer);  // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true;  // reset position of popup box popup.css({ bottom: 20, left: -76, display: 'block' // brings the popup back in to view })  // (we're using chaining on the popup) now animate it's opacity and position .animate({ bottom: '+=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer);  // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ bottom: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); });});

下面这部分CSS代码的作用是实现漂亮的框阴影效果：

.events {
position: relative;
}
.events ul {
text-align: left;
position: absolute;
display: none;
z-index: 1000;
padding: 15px;
background: #E7ECF2 url(../img/popup.png) no-repeat;
color: white;
border: 1px solid white;
font-size: 15px;
width: 200px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px; -webkit-border-radius: 3px;
-border-radius: 3px;
list-style: none;
color: #444444;
-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
padding-bottom: 5px;
}
.events li span {
display: block;
font-size: 12px;
text-align: justify;
color: #555;
}
.events li span.title {
font-weight: bold;
color: #222;

所有代码都已经开放，大家有兴趣的可以自己试试。

如果有什么不明白的可以加首页上的QQ进行咨询。
转载时请注明出处。此信息出自逸诚科技：http://www.56mp.cn