zoukankan
html css js c++ java
在线演示demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>仿微博添加和删除动画</title> <style> body{} input,button,select,textarea{outline:none;} .sdiv{400px;} .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;} .box textarea{position:relative;97%;height:100px;resize:none;border:0;font-family:微软雅黑} .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);} .sdiv input{float:right;} ul{list-style:none;margin:0;padding:0;400px;} ul li{border-bottom:1px solid #CCC;} </style> </head> <body> <div class="sdiv"> <div id="box" class="box"> <textarea id="say" placeholder="ctrl+enter快速发表" autofocus></textarea> </div> <input type="button" id="submit" value="发布"> </div> <div style="margin-top: 30px;font-size: 15px;font-family: 微软雅黑;"> <ul id="talklist"> <li style="border:0; height:1px;"></li> <li> <p>光和热价格将让干活而几个金融股而今日韩国而今日韩国额空间人工湖额狂人合格客韩国科技更何况菊花哥快干活而况人乎顾客让韩国可</p> <div style="height:20px;"> <span style="float:left">2013/04/09</span> <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> </div> </li> <li> <p>任何人和投入人让他忽然听话人红人堂然后 让他忽然听话润喉糖人挺好</p> <div style="height:20px;"> <span style="float:left">2013/04/09</span> <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> </div> </li> <li> <p>嘎嘎嘎个任何人挺好教育局他肽聚糖金太阳交通局他太远 润喉糖</p> <div style="height:20px;"> <span style="float:left">2013/04/09</span> <div style="float:right;"><a class="delBtn" href='javascript:;' style="text-decoration:none">删除</a></div> </div> </li> </ul> </div> </body> </html> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> <script type="text/javascript"> $(function(){ $("#say").focus(); }) $('#say').focus(function(){ $('#box').addClass('focus'); }); $('#say').blur(function(){ $('#box').removeClass('focus'); }); //ctrl+center发布 $(document).keypress(function(e){ if(e.ctrlKey && e.which == 13 || e.which == 10) { submit(); } else if (e.shiftKey && e.which==13 || e.which == 10) { //$("#btnv").click(); //document.body.focus(); } }) //摁按钮发布 $("#submit").click(function(){ submit(); }); function submit() { var word = $("#say").val(); if(word=="" || word.length==0){ return; } $("#submit").attr({"disabled":"disabled"});//暂时禁用按钮 var $ul = $("#talklist"); $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>'); var $lastli = $ul.find("li:last"); var $firstli = $ul.find("li:first"); var liHeight = $lastli.height(); //$lastli.prependTo($ul); //$firstli.hide(); //$firstli.slideDown('slow', function(){}); $firstli.after($lastli); $lastli.hide(); $lastli.slideDown('slow', function(){}); $("#say").val(""); //清除输入框的内容 $("#say").focus(); //输入框获取焦点 $("#submit").removeAttr('disabled');//按钮可以使用 } $(".delBtn").live('click', function(){ var $li = $(this).parents('li'); $li.slideUp('slow', function() {$(this).remove();}); }); </script>
查看全文
相关阅读:
java.lang.ExceptionInInitializerError异常分析
项目中碰到的ExceptionInInitializerError异常
获取全局上下文(getApplicationContext)_创建Shared Preference工具类_实现自动登录
IntelliJ Idea 常用快捷键列表
Qt 创建圆角、无边框、有阴影、可拖动的窗口 good
去掉 Windows 中控件的虚线框(当当 element == QStyle::PE_FrameFocusRect 时,直接返回,不绘制虚线框)
Qt 显示 GIF
C++ 查看预处理后的源文件(查看真实代码)
数据库访问工具 DBUtl(公孙二狗)
Tornado
原文地址:https://www.cnblogs.com/xumengxuan/p/3362886.html
最新文章
Java实现 LeetCode 5 最长回文子串
Java实现 LeetCode 4 寻找两个有序数组的中位数
Java实现 LeetCode 4 寻找两个有序数组的中位数
Java实现 LeetCode 4 寻找两个有序数组的中位数
多线程编程之一 ---问题提出
多线程编程之二 ---MFC中的多线程开发
多线程编程之 ---线程间通讯
怎样从一个DLL中导出一个C++类
windows 下面的内存泄漏排查.
API各函数作用简介
热门文章
DLL编写教程(绝对经典之作)
CDialogSK
Dialog with HTML skin using CDHtmlDialog and SetWindowRgn
Using SetWindowRgn
com.sun.mirror的jar包
《JAVA编程思想》第四版 PDF 下载 中文版和英文版 高清PDF扫描带书签
DAX的圈圈大坑:循环依赖关系错误circular dependency (单表篇)
gradle命令学习
Android Studio打包apk,aar,jar包
android 如何创建配置文件和读配置文件
Copyright © 2011-2022 走看看