是的，要模擬的就是上圖這種效果。這個效果主要出現在安卓，尤其是三星的手機上。前兩天受同事的「邀請」，讓我用網頁實現這樣的效果，今天周末，起床后趁着還有點睡意，就把它搞定了。粗制濫造的幾行代碼，沒有傳說中的語義化，沒有管是否適合用在實際項目中，純粹就為了好玩。
直接看 DEMO 吧：http://demo.abo.hk/notify-list/ 在手機上效果更像哦！
然后是代碼，請不要糾結寫的是否合理，是否可以再優化，這純粹是為了效果，為了好玩。
先是 HTML 代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿手機通知列表清除效果 - 作者：ABEL</title> <link type="text/css" rel="stylesheet" href="style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="notify"> <div class="header"> <span>仿手機通知列表</span> <a class="empty" href="javascript:;">清 除</a> </div> <ol class="list"> <li style="background-position:5px 10px;"> <p>作者：<a href="http://weibo.com/ABELYAO" target="_blank">阿博ABEL</a></p> <span><a href="http://abel.cnblogs.com/" target="_blank">abel.cnblogs.com</a></span> </li> <li style="background-position:5px -190px;"> <p>新浪微博</p> <span>您有 10 條新微博，2 條私信</span> </li> <li style="background-position:5px -40px;"> <p>cnBeta.com</p> <span>您有 10 條未讀新聞</span> </li> <li style="background-position:5px -90px;"> <p>Adobe Update</p> <span>3 Updates</span> </li> <li style="background-position:5px -140px;"> <p>iTunes</p> <span>正在播放音樂…</span> </li> </ol> </div> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function() { $("#notify .empty").bind("click", function() { var w = $("#notify").width(); // 將列表中的對象，反序放到一個新的數組中 var list = []; $("#notify .list li").each(function() { list.unshift($(this)); }); // 循環對象數組 for(var i in list) { // 每個對象延遲i*100毫秒再開始動畫效果，完事后移除節點 list[i].delay(i*100).animate({'margin-left': w + 'px'}, 300, function() { $(this).remove(); }) } }); }); </script> </body> </html>
然后是 CSS 代碼：
@charset "utf-8"; * { margin: 0; padding: 0; border: 0; list-style: outside none; } body { background: url(bg.jpg); font: 14px/1.0 'Microsoft YaHei'; } a { text-decoration: none; } #notify { margin: 30px 0 0 50px; background: url(list-bg.png); width: 300px; height: 450px; } @media screen and (max-device-width: 650px) { #notify { margin: 0; width: 100%; } } #notify .header { background: #212729; color: #FFF; line-height: 30px; font-weight: bold; padding-left: 10px; } #notify .header .empty { float: right; background: #53840F; width: 80px; text-align: center; color: #FFF; border-radius: 7px 0 0 7px; } #notify .list { overflow: hidden; width: 100%; } #notify .list li { background: #464B4B url(icon.png) no-repeat; border-bottom: 1px solid #212729; height: 50px; overflow: hidden; } #notify .list li p { font-size: 16px; color: #FFF; padding-left: 55px; padding-top: 8px; line-height: 20px; width: 200px; } #notify .list li span { display: block; color: #CCC; font-size: 12px; padding-left: 55px; width: 200px; } #notify .list li a { color: #9CC; }
that's all.