是的，要模拟的就是上图这种效果。这个效果主要出现在安卓，尤其是三星的手机上。前两天受同事的「邀请」，让我用网页实现这样的效果，今天周末，起床后趁着还有点睡意，就把它搞定了。粗制滥造的几行代码，没有传说中的语义化，没有管是否适合用在实际项目中，纯粹就为了好玩。
直接看 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- 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.