微博发布效果jq版
大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等。代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布jq版</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
/*重置{*/
html{color:#000;background:#fff;}
body,div,ul,li,h1,input,button,textarea{padding:0;margin:0;}
img{border:0;}
li{list-style:none;}
/*}重置*/
h1{margin:20px auto 0;font-size:30px;width:200px;text-align:center;color:blue;}
#outer{position:relative;width:400px;margin:auto;margin:20px auto 10px;}
#test1{display:block;width:400px;height:70px;}
.error{background:#f00;width:400px;height:50px;position:absolute;left:1px;top:10px;opacity:0.6;filter:alpha(opacity=60);}
#test2{display:block;margin-left:800px;width:60px;height:30px;font-size:20px;}
.test3{margin:10px auto;width:400px;}
#test3{border:1px #444 solid;width:400px;min-height:300px;_height:300px;padding-bottom:10px;color:blue;float:left;}
.test{border-bottom:1px blue dotted;width:383px;padding:10px 5px 5px 10px;float:left;}
.inf{margin-top:15px;float:right;color:#555;}
.con{margin-left:16px;display:inline;width:304px;float:left;word-break:break-all;}
.bu{margin-left:6px;display:inline;}
.imgs{width:60px;height:60px;float:left;}
.imgInf{width:120px;background:#f0f;color:#fff;position:absolute;z-index:2;left:-65px;top:62px;opacity:0.5;filter:alpha(opacity=50);}
.finish{background:green;width:300px;height:50px;color:#ff0;font-size:30px;text-align:center;line-height:50px;position:absolute;left:50px;top:10px;opacity:0.6;filter:alpha(opacity=60);}
.imgOut{position:relative;} </style>
</head>
<body>
<h1>微博发布</h1>
<div id="outer">
<textarea id="test1" ></textarea>
</div>
<input type="button" id="test2" value="发布"/>
<div class="test3"><div id="test3"></div></div> <script type="text/javascript">
<!--
$('#test2').click(function(){ //点击发布的事件
if($('#test1')[0].value==""){
var finish=$('<div class="error"></div>').appendTo($('#outer')).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200);
return;
}else{
$('#test2')[0].disabled=true; //发布成功后,禁止
var timer=new Date();
//微博
$('<div class="test"><span class="imgOut"><img src="data:images/wukong.gif" class="imgs"/></span><div class="con"></div><div class="inf">'+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+'<input type="button" value="删除" class="bu"/></div></div>').prependTo($('#test3'));
$('.con')[0].innerText=$('#test1')[0].value;
//头像信息
$('.imgs:eq(0)').hover(
function(){$('<ul class="imgInf"><li>名字:悟空</li><li>称号:战斗圣佛</li><li>现居:花果山</li></ul>').appendTo($(this).parent());},
function(){$('.imgInf').remove();}
)
//清空
$('#test1')[0].value="";
//发布成功时动画
$('<div class="finish">发布成功</div>').appendTo($('#outer')).hide().fadeIn(500).fadeOut(500,function(){$('#test2')[0].disabled=false;});
//插入节点时的动画效果
$('.test:first').hide().slideDown("slow");
//删除按钮的事件
$('.bu:eq(0)').click(function(){
if(confirm('确定删除吗?')){
$(this).parent().parent().hide(1000,function(){
$(this).remove();
});
}
});
}
})
//-->
</script>
</body>
</html>
微博发布效果jq版的更多相关文章
- 原生JS+tween.js模仿微博发布效果
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...
- VUE实现微博发布效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- JS学习笔记 - 微博发布效果
<script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...
- js控住DOM实现发布微博简单效果
这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- 《nodejs开发指南》微博实例express4.x版
之前一直执着于前端开发,最近几天,开始学起了nodejs.作为一名前端开发者,见到这样一门用javascript写的后台自然是很激动的.但是,后台毕竟不同于前端,在学习的过程中,还是会遇到不少问题. ...
- js微博发布框的实现
观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...
- 一个jQ版大图滚动
难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...
随机推荐
- ADO.Net连接模式
1.SqlConnection类 (1).通过构造函数创建一个SqlConnection对象,可以同时指定连接字符串 (2).通过SqlConnection对象的Open()方法打开数据库连接 (3) ...
- 页面样式base.css
下面是我用过多次的base.css.欢迎各种建议吐槽.大家共同进步. ;;} table{;} fieldset,img {;} address,caption, cite,code,dfn,em,s ...
- linode最新试用(购买)流程
最新linode官网www.linode.com可以免费试用7天,但是需要你的身份认证 第一步:注册一个linode账号email填写国内的163.126.qq邮箱是不能认证的,这里可以填写gmail ...
- python 多线程爬虫
最近,一直在做网络爬虫相关的东西. 看了一下开源C++写的larbin爬虫,仔细阅读了里面的设计思想和一些关键技术的实现. 1.larbin的URL去重用的很高效的bloom filter算法: 2. ...
- python正则表达式练习篇
练习一: 利用who命令输出所有已经登录系统的用户的信息,并把登录名.用户登录时的电传.登录时间.登录地址利用正则表达式分割开来. 数据的格式: %who wesc console Jun 20 20 ...
- Springmvc加载静态文件和开启EL表达式的支持
一.静态文件加载问题 刚开始学习SpringMVC,发现静态文件无法加载 web.xml配置如下: <web-app id="WebApp_ID" version=" ...
- LinuxCmd
Q1.关掉字符界面下的屏保 A:setterm -blank 0 Q2.top Top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. ...
- IO-03. 求整数均值
/** *A3-IO-03. 求整数均值(10) *C语言实现 *测试已通过 */ #include "stdio.h" int main() { int a,s,d,f; sca ...
- [WPF]解决ListView在没有Items时,水平滚动条不出现的问题
转载地址:http://www.cnblogs.com/nankezhishi/archive/2010/03/19/FixListViewNotScrollHeaderBug.html 在上一篇Bl ...
- 凯恩斯主义VS货币主义
Milton Friedman在1960年代后期以及整个1970年代,到处不知疲倦地像传教士一般地宣讲他的货币主义.当时,美联储成员几乎清一色地是凯恩斯主义者.你可以想像Friedman的对手是多么强 ...