基于jquery DOM写的类似微博发布的效果


Posted in Javascript onOctober 20, 2012
<!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="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>
Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
详解javascript void(0)
Jul 13 Javascript
JS的replace方法介绍
Oct 20 #Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 #Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 #Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 #Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 #Javascript
JS自动缩小超出大小的图片
Oct 12 #Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
探亲假请假条
2014/04/11 职场文书
二年级评语大全
2014/04/23 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
银行催款通知书
2015/04/17 职场文书