用网页模拟手机（安卓）通知列表中的「清除」效果

 

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

直接看 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.

posted @ 2013-08-04 23:35  ABEL  阅读(2063)  评论(4)  编辑  收藏  举报