仿微博添加和删除的动画
原先从网上搜过仿微博的添加和删除动画，只不过没有整理过，而且还只用了其中的添加或者删除，如果要用的话还得去原来的项目去找。
现在就整理出了一份，添加和删除都有了。不过代码中也用到了别人的代码，可是那时没有记住作者的链接，也不好注明出处了。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>仿微博添加和删除动画</title> 6 <style> 7 body{} 8 input,button,select,textarea{outline:none;} 9 .sdiv{width:400px;} 10 .box{border: 1px solid #D0D0D0;line-height: 1.231;word-wrap: break-word;word-break: break-all;border-radius: 6px;margin: 0;padding: 0;text-align: center;} 11 .box textarea{position:relative;width:97%;height:100px;resize:none;border:0;font-family:微软雅黑} 12 .focus{border-color:#7BD6F6;-webkit-box-shadow:0 0 10px rgba(123, 214, 246, .6);box-shadow:0 0 10px rgba(123, 214, 246, .6);} 13 .sdiv input{float:right;} 14 ul{list-style:none;margin:0;padding:0;width:400px;} 15 ul li{border-bottom:1px solid #CCC;} 16 </style> 17 </head> 18 <body> 19 <div class="sdiv"> 20 <div id="box" class="box"> 21 <textarea id="say" placeholder="ctrl+enter快速发表" autofocus></textarea> 22 </div> 23 <input type="button" id="submit" value="发布"> 24 </div> 25 <div style="margin-top: 30px;font-size: 15px;font-family: 微软雅黑;"> 26 <ul id="talklist"> 27 <li style="border:0; height:1px;"></li> 28 <li> 29 <p>光和热价格将让干活而几个金融股而今日韩国而今日韩国额空间人工湖额狂人合格客韩国科技更何况菊花哥快干活而况人乎顾客让韩国可</p> 30 <div style="height:20px;"> 31 <span style="float:left">2013/04/09</span> 32 <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> 33 </div> 34 </li> 35 <li> 36 <p>任何人和投入人让他忽然听话人红人堂然后 让他忽然听话润喉糖人挺好</p> 37 <div style="height:20px;"> 38 <span style="float:left">2013/04/09</span> 39 <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> 40 </div> 41 </li> 42 <li> 43 <p>嘎嘎嘎个任何人挺好教育局他肽聚糖金太阳交通局他太远 润喉糖</p> 44 <div style="height:20px;"> 45 <span style="float:left">2013/04/09</span> 46 <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> 47 </div> 48 </li> 49 </ul> 50 </div> 51 </body> 52 </html> 53 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> 54 <script type="text/javascript"> 55 $(function(){ 56 $("#say").focus(); 57 }) 58 $('#say').focus(function(){ 59 $('#box').addClass('focus'); 60 }); 61 $('#say').blur(function(){ 62 $('#box').removeClass('focus'); 63 }); 64 65 //ctrl+center发布 66 $(document).keypress(function(e){ 67 if(e.ctrlKey && e.which == 13 || e.which == 10) { 68 submit(); 69 } else if (e.shiftKey && e.which==13 || e.which == 10) { 70 //$("#btnv").click(); 71 //document.body.focus(); 72 } 73 }) 74 75 //摁按钮发布 76 $("#submit").click(function(){ 77 submit(); 78 }); 79 function submit() { 80 var word = $("#say").val(); 81 if(word=="" || word.length==0){ 82 return; 83 } 84 $("#submit").attr({"disabled":"disabled"});//暂时禁用按钮 85 86 var $ul = $("#talklist"); 87 $ul.append('<li><p>'+word+'</p><div style="height:20px;"><span style="float:left">'+'4/9'+'</span><div style="float:right;"><a class="delBtn" href="javascript:;" style="text-decoration:none">删除</a></div></div>'); 88 var $lastli = $ul.find("li:last"); 89 var $firstli = $ul.find("li:first"); 90 var liHeight = $lastli.height(); 91 92 //$lastli.prependTo($ul); 93 //$firstli.hide(); 94 //$firstli.slideDown('slow', function(){}); 95 $firstli.after($lastli); 96 $lastli.hide(); 97 $lastli.slideDown('slow', function(){}); 98 99 100 $("#say").val(""); //清除输入框的内容 101 $("#say").focus(); //输入框获取焦点 102 $("#submit").removeAttr('disabled');//按钮可以使用 103 } 104 105 $(".delBtn").live('click', function(){ 106 var $li = $(this).parents('li'); 107 $li.slideUp('slow', function() {$(this).remove();}); 108 }); 109 </script>
