用网页模拟手机(安卓)通知列表中的「清除」



用网页模拟手机(安卓)通知列表中的「清除」

 

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

直接看 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 ="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;}

OVER. 



本文网址: http://www.baisoujs.com/detail_137578458332861.html

你可能感兴趣的:(用网页模拟手机(安卓)通知列表中的「清除」)