• 仿微博添加和删除的动画


      原先从网上搜过仿微博的添加和删除动画,只不过没有整理过,而且还只用了其中的添加或者删除,如果要用的话还得去原来的项目去找。

      现在就整理出了一份,添加和删除都有了。不过代码中也用到了别人的代码,可是那时没有记住作者的链接,也不好注明出处了。

     在线演示

      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>
  • 相关阅读:
    Spring Batch 中的 chunk
    群晖(Synology)NAS 安装 MongoDB
    CentOS 上安装 Sonatype Nexus 仓库
    Jenkins pipeline Git 检出的 Step
    Npm 使用 Nexus 仓库的登录时候出现授权的问题
    Jenkins pipeline 如何到子文件中去执行命令
    Sonatype Nexus 管理员初始密码
    关于tkintergui窗体中循环周期性执行某段代码的方法记录
    关于windows服务器修改hosts文件不生效的问题原因分析
    关于Centos8.X操作系统不能使用yum源的解决方法
  • 原文地址:https://www.cnblogs.com/xumengxuan/p/3010653.html
Copyright © 2020-2023  润新知